/* ==========================================================================
   tokens.css — 设计令牌 / Design tokens
   --------------------------------------------------------------------------
   教学意图：整站的颜色、间距、字号、圆角、阴影都只在这里定义一次，
   其余样式文件一律通过 var(--token) 引用。
   这正是第 1 章讲的「用系统代替随手取值」——改一个变量，全站同步变化。
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- 字体族 / Font stacks ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Songti SC", "Noto Serif SC", "SimSun", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* ---------- 颜色 / Colors ---------- */
  --bg: #faf9f7;
  --bg-soft: #f2f0ea;
  --surface: #ffffff;
  --surface-2: #fbf9f6;
  --ink: #17181c;
  --ink-2: #3b3d45;
  --muted: #6c6f7b;
  --line: #e5e1d9;
  --line-2: #d2cdc2;
  --accent: #1f6b64;
  --accent-2: #b1593a;
  --accent-3: #b9892f;      /* 演示区：琥珀 */
  --accent-3-ink: #8a6314;
  --accent-soft: #e8f1ef;
  --accent-line: #bcd8d4;
  --mark: #f8ecc9;
  --ok: #2f7a4f;
  --warn: #9a5f1c;
  --grid-guide: rgba(31, 107, 100, 0.10);
  --grid-guide-strong: rgba(177, 89, 58, 0.55);

  /* ---------- 间距刻度 / Spacing scale ---------- */
  /* 以 4px 为最小步长，逐级放大。单调、成比例，才能产生「节奏」。 */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* ---------- 流体字号刻度 / Fluid type scale ---------- */
  /* clamp(最小, 首选, 最大)：字号随视口平滑变化，减少断点跳跃。 */
  --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.875rem);
  --step-0: clamp(0.98rem, 0.95rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.12rem, 1.06rem + 0.30vw, 1.30rem);
  --step-2: clamp(1.30rem, 1.18rem + 0.55vw, 1.65rem);
  --step-3: clamp(1.55rem, 1.34rem + 0.95vw, 2.15rem);
  --step-4: clamp(1.90rem, 1.50rem + 1.80vw, 3.00rem);
  --step-5: clamp(2.30rem, 1.60rem + 3.20vw, 4.20rem);

  --leading-tight: 1.18;
  --leading-snug: 1.4;
  --leading-normal: 1.7;

  /* ---------- 形状 / Shape ---------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(20, 20, 30, 0.05), 0 2px 8px rgba(20, 20, 30, 0.05);
  --shadow-2: 0 10px 30px rgba(20, 20, 30, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- 版式度量 / Layout metrics ---------- */
  --header-h: 60px;          /* 顶栏高度，供 sticky 定位计算 */
  --content: 1180px;         /* 站点内容区最大宽度 */
  --measure: 68ch;           /* 正文行宽上限：约 68 个字符，落在 45–75 的可读区间 */
  --toc-w: 196px;            /* 章节目录栏宽度：按最长条目收紧，别在栏内留出大片空档 */

  /* ---------- 动效 / Motion ---------- */
  --t-fast: 140ms;
  --t-base: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ==========================================================================
   暗色主题 / Dark theme
   只覆盖语义变量，不改任何一条组件样式 —— 换肤的成本因此接近为零。
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14151a;
  --bg-soft: #1b1d23;
  --surface: #1c1e25;
  --surface-2: #22242c;
  --ink: #eceef2;
  --ink-2: #c7cad3;
  --muted: #969aa6;
  --line: #2c2f38;
  --line-2: #3a3e49;
  --accent: #6cc6bb;
  --accent-2: #e08a63;
  --accent-3: #d9b061;
  --accent-3-ink: #e2c076;
  --accent-soft: #1d2c2b;
  --accent-line: #2f4a48;
  --mark: #4a3f1c;
  --ok: #6cc48f;
  --warn: #d9a45f;
  --grid-guide: rgba(108, 198, 187, 0.14);
  --grid-guide-strong: rgba(224, 138, 99, 0.6);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}