:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --ink-900: #10151c;
  --ink-800: #1c2430;
  --ink-700: #2b3644;
  --ink-600: #46566b;
  --ink-500: #66788f;
  --ink-400: #8a99ac;
  --ink-300: #b3becd;
  --ink-200: #d8e0ea;
  --ink-100: #eaeff5;
  --ink-50: #f5f8fc;

  --paper: #ffffff;
  --canvas: #f3f6fa;
  --canvas-deep: #e9eff7;

  --accent-700: #155e75;
  --accent-600: #0e7490;
  --accent-500: #0891b2;
  --accent-100: #cffafe;
  --accent-50: #ecfeff;

  --ok-600: #15803d;
  --ok-100: #dcfce7;
  --warn-600: #b45309;
  --warn-100: #fef3c7;
  --danger-600: #b91c1c;
  --danger-100: #fee2e2;
  --info-600: #1d4ed8;
  --info-100: #dbeafe;

  --l1: #0e7490;
  --l1-bg: #ecfeff;
  --l2: #b45309;
  --l2-bg: #fffbeb;
  --l3: #b91c1c;
  --l3-bg: #fef2f2;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --shadow-xs: 0 1px 2px rgba(16, 21, 28, .05);
  --shadow-sm: 0 1px 3px rgba(16, 21, 28, .07), 0 1px 2px rgba(16, 21, 28, .04);
  --shadow-md: 0 6px 20px rgba(16, 21, 28, .08);
  --shadow-lg: 0 18px 48px rgba(16, 21, 28, .14);

  --ring: 0 0 0 3px rgba(8, 145, 178, .22);
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .14s;
  --dur: .24s;
  --dur-slow: .48s;
  --dur-reveal: .62s;

  --sidebar-w: 232px;
  --topbar-h: 60px;
  --content-max: 1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; color: var(--ink-900); line-height: 1.3; }
h1 { font-size: 26px; letter-spacing: -.02em; }
h2 { font-size: 19px; letter-spacing: -.01em; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--accent-600); text-decoration: none; }
a:hover { color: var(--accent-700); }
small { font-size: 12px; color: var(--ink-500); }
code, pre { font-family: var(--font-mono); font-size: 12.5px; }
hr { border: 0; border-top: 1px solid var(--ink-100); margin: var(--sp-5) 0; }

::selection { background: var(--accent-100); color: var(--ink-900); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}