/* 设计令牌 —— 方向：轻奢编辑感 × 科技蓝。
   品牌主色取自高维蓝（≈#2BA9E0），用 oklch 表达以获得更干净的明度梯度。 */
:root {
  /* 品牌色阶 */
  --brand-50:  oklch(97% 0.02 235);
  --brand-100: oklch(94% 0.04 235);
  --brand-200: oklch(88% 0.07 235);
  --brand-300: oklch(80% 0.10 235);
  --brand-400: oklch(72% 0.13 235);
  --brand-500: oklch(64% 0.145 236);  /* 主品牌蓝 */
  --brand-600: oklch(56% 0.135 238);
  --brand-700: oklch(47% 0.115 240);
  --brand-800: oklch(38% 0.09 242);

  /* 中性 / 墨色 */
  --ink-900: oklch(22% 0.025 245);
  --ink-700: oklch(38% 0.02 245);
  --ink-500: oklch(54% 0.015 245);
  --ink-400: oklch(64% 0.012 245);
  --ink-300: oklch(78% 0.01 245);

  /* 表面 */
  --bg:        oklch(98.4% 0.006 235);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(98% 0.008 235);
  --line:      oklch(91% 0.012 238);
  --line-soft: oklch(94% 0.008 238);

  /* 语义色 */
  --good:   oklch(64% 0.15 150);
  --good-bg: oklch(95% 0.05 150);
  --warn:   oklch(64% 0.16 30);
  --warn-bg: oklch(95% 0.05 32);
  --gold:   oklch(80% 0.12 85);

  /* 字号（流式） */
  --text-xs:  0.78rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-lg:  1.125rem;
  --text-xl:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  --text-hero: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);

  /* 间距 */
  --space-section: clamp(2.5rem, 1.8rem + 3vw, 5rem);

  /* 圆角 / 阴影 */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-sm: 0 1px 2px oklch(40% 0.04 240 / 0.06), 0 2px 8px oklch(40% 0.04 240 / 0.05);
  --shadow-md: 0 8px 24px oklch(40% 0.06 240 / 0.10), 0 2px 6px oklch(40% 0.06 240 / 0.06);
  --shadow-lg: 0 24px 60px oklch(40% 0.08 240 / 0.16), 0 6px 18px oklch(40% 0.06 240 / 0.08);
  --shadow-brand: 0 14px 40px oklch(64% 0.145 236 / 0.32);

  /* 动效 */
  --dur-fast: 140ms;
  --dur: 280ms;
  --dur-slow: 560ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", "Menlo", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-cjk);
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }

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