/* =========================================================================
   tokens.css — 设计变量
   分层：原始色板 → 语义 token → 明暗映射
   改配色只改这一个文件；其余样式只消费语义 token。
   ========================================================================= */

:root {
  /* ---------- 原始色板（不带语义，明暗共用） ---------- */
  --stone-50: #f7f6f3;
  --stone-100: #efece7;
  --stone-200: #e2ded7;
  --stone-300: #c9c4ba;

  --ink-900: #14161a;
  --ink-700: #3a3f47;
  --ink-500: #626a75;
  --ink-300: #a7aeb8;

  --slate-950: #0e1114;
  --slate-900: #14181c;
  --slate-850: #171b20;
  --slate-800: #1b2026;
  --slate-750: #262c33;
  --slate-700: #3a434d;
  --slate-400: #9aa5b1;
  --slate-300: #c9d1d9;
  --slate-100: #f2f4f6;

  --teal-800: #14322d;
  --teal-700: #134f46;
  --teal-600: #1b6b5f;
  --teal-500: #2e8577;
  --teal-300: #7fd6c4;

  /* ---------- 排版 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, Helvetica,
    Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Songti SC", "Source Han Serif SC",
    "Noto Serif SC", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-eyebrow: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --fs-h1: clamp(2.5rem, 1.85rem + 3vw, 4.25rem);
  --fs-display: clamp(1.875rem, 1.3rem + 3.1vw, 3.5rem);

  --lh-tight: 1.12;
  --lh-heading: 1.24;
  --lh-body: 1.75;
  --lh-ui: 1.45;

  --tracking-wide: 0.08em;
  --tracking-tight: -0.02em;

  /* ---------- 间距 / 尺寸 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-pad: clamp(64px, 9vw, 128px);
  --gutter: clamp(20px, 5vw, 40px);
  --container: 1120px;
  --measure: 66ch;
  --header-h: 68px;

  /* ---------- 圆角 / 动效 / 层级 ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-header: 100;
  --z-progress: 150;
  --z-overlay: 200;
  --z-cmdk: 300;
  --z-toast: 400;
}

/* ---------- 香港繁体：字体栈 ----------
   标题优先本机已安装的「港鐵宋 / MTR Sung」。该字体版权属港铁公司，
   不可内嵌或分发，因此这里只做 family 引用：没装就自动回退到港式明体。
   正文优先香港字形黑体，避免繁体文本里混入简体字形。 */
html[lang="zh-HK"] {
  --font-sans: "PingFang HK", "Hiragino Sans CNS", "Noto Sans HK",
    "Microsoft JhengHei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-serif: "港鐵宋", "港铁宋", "MTR Sung", "MetroSung", "儷宋 Pro",
    "LiSong Pro", "DFLiSong-Md", "Noto Serif HK", "Source Han Serif HC",
    "PMingLiU", "Songti TC", "Iowan Old Style", Georgia, serif;
}

/* ---------- 明暗映射：只有这一段随主题切换 ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg-page: #f7f6f3;
  --bg-surface: #ffffff;
  --bg-raised: #ffffff;
  --bg-subtle: #efece7;
  --bg-header: rgba(247, 246, 243, 0.82);

  --fg-primary: #14161a;
  --fg-secondary: #3a3f47;
  --fg-muted: #626a75;
  --fg-on-accent: #ffffff;

  --bd-subtle: #e2ded7;
  --bd-strong: #c9c4ba;

  --accent: #1b6b5f;
  --accent-hover: #134f46;
  --accent-weak: #e3f0ed;
  --focus: #1b6b5f;

  --danger: #a32b22;
  --danger-weak: #fbeceb;

  --shadow-1: 0 1px 2px rgba(20, 22, 26, 0.05), 0 1px 3px rgba(20, 22, 26, 0.04);
  --shadow-2: 0 4px 12px -4px rgba(20, 22, 26, 0.1), 0 2px 6px -2px rgba(20, 22, 26, 0.06);
  --shadow-3: 0 18px 44px -14px rgba(20, 22, 26, 0.18);
  --surface-sheen: transparent;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: #0e1114;
  --bg-surface: #14181c;
  --bg-raised: #1b2026;
  --bg-subtle: #171b20;
  --bg-header: rgba(14, 17, 20, 0.82);

  --fg-primary: #f2f4f6;
  --fg-secondary: #c9d1d9;
  --fg-muted: #9aa5b1;
  --fg-on-accent: #08130f;

  --bd-subtle: #262c33;
  --bd-strong: #3a434d;

  --accent: #5fb8a6;
  --accent-hover: #7fd6c4;
  --accent-weak: #14322d;
  --focus: #7fd6c4;

  --danger: #ff9b90;
  --danger-weak: #2a1716;

  /* 暗色下阴影几乎不可见，改用 1px 内描边建立层次 */
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 24px -12px rgba(0, 0, 0, 0.8);
  --shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  --surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%);
}