/* =========================================================
   tokens.css - 全站设计变量
   改动这里就能改全站观感。不要在其他文件里写死颜色和间距。
   ========================================================= */

:root {
  /* 字体 */
  --font-display: "Bricolage Grotesque", "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas,
    "Liberation Mono", monospace;

  /* 字号 */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-xl: clamp(1.35rem, 1.15rem + 0.9vw, 1.875rem);
  --fs-2xl: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
  --fs-display: clamp(2.55rem, 1.5rem + 4.1vw, 4.9rem);

  /* 间距刻度，4px 基准 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(3.75rem, 2.2rem + 5.2vw, 7.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 2.75rem);
  --measure: 62ch;

  /* 形状：全站只有两套圆角，面板 18，内部媒体 12，按钮胶囊 */
  --r-panel: 18px;
  --r-media: 12px;
  --r-pill: 999px;

  /* 动效 */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-mid: 0.42s;
  --dur-slow: 0.85s;

  /* 层级 */
  --z-grain: 60;
  --z-nav: 40;
}

/* ---------- 浅色（默认） ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f4f1;
  --bg-elev: #fcfcfa;
  --bg-sunken: #e8e8e1;

  --ink: #16171a;
  --ink-muted: #5b5e57;
  --ink-faint: #6d7069;

  --line: #d8d8d0;
  --line-strong: #bcbbb1;
  --media-edge: rgba(22, 23, 26, 0.1);

  --accent: #d2421d;
  --accent-ink: #ffffff;
  --accent-text: #ad3a19;
  --accent-soft: #f2dcd3;

  --shadow-panel: 0 30px 70px -46px rgba(22, 23, 26, 0.4);
  --shadow-nav: 0 1px 0 rgba(22, 23, 26, 0.06);
  --nav-bg: rgba(244, 244, 241, 0.78);
}

/* ---------- 深色 ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e100f;
  --bg-elev: #191d1a;
  --bg-sunken: #090b0a;

  --ink: #ecede6;
  --ink-muted: #9fa399;
  --ink-faint: #8b8f86;

  --line: #262a25;
  --line-strong: #3a3f38;
  --media-edge: rgba(255, 255, 255, 0.09);

  --accent: #ff6b3d;
  --accent-ink: #140f0c;
  --accent-text: #ff8259;
  --accent-soft: #2b1913;

  --shadow-panel: 0 30px 80px -46px rgba(0, 0, 0, 0.9);
  --shadow-nav: 0 1px 0 rgba(255, 255, 255, 0.05);
  --nav-bg: rgba(14, 16, 15, 0.72);
}