/* tokens.css — 家用咖啡设计变量（唯一语义来源，由 extract.mjs 抽取后人工整理）
   整理原则：
   1) 与 style.css 的 :root **取值完全一致**，避免两处定义漂移（内页按
      style.css → tokens.css → components.css 顺序引入，任何一项单独更新都不会改变首页）。
   2) 删掉脚本按字面量补出来的 --fs-N 重编号（它会与 :root 的 --fs-1..9 撞名），
      保留脚本新增的 7 个确有用途的语义变量。
   3) 内页只引用这里的变量，不写字面量颜色与字号。 */

:root {
  /* —— 底色与表面 —— */
  --bg: #f3ebe2;              /* 页面底色（暖纸白） */
  --bg-warm: #f3ebe2;         /* 页脚浅色区，与 --bg 同值，语义分开便于日后调 */
  --header-bg: #efdfcb;       /* 页头底色（比页面更沙） */
  --surface: #eedcc5;         /* 卡片底色 */
  --surface-alt: #f0e0cb;     /* 卡片 hover / 次级表面 */
  --sand: #e8d6c2;            /* 表头、色带 */
  --bg-elevated: #3a1d09;     /* 深色块内的抬升层（豆子深色阶、深底卡片） */

  /* —— 线 —— */
  --line: #ddcebb;            /* 分隔线 / 描边 */
  --line-soft: #e9ddcc;       /* 弱分隔线 */
  --on-dark-line: rgba(251, 243, 232, 0.18); /* 深底上的细线 */

  /* —— 文字 —— */
  --ink: #2c1a0d;             /* 主文字（近黑棕） */
  --ink-2: #4a3320;           /* 正文次级 */
  --muted: #6d5a46;           /* 说明文字 */
  --muted-alt: #b8a184;       /* 深底上的次要说明 */
  --ink-invert: #fdf7f1;      /* 深底主文字 */
  --ink-alt: #fff;            /* 深底高亮（hover） */
  --on-dark: rgba(251, 243, 232, 0.82);      /* 深底正文 */
  --on-dark-soft: rgba(251, 243, 232, 0.6);  /* 深底次要文字 */

  /* —— 强调色 —— */
  --accent: #6c3c14;          /* 主强调：按钮、图标、分类标签 */
  --accent-2: #8a5322;        /* 强调的浅一档（hover、序号） */
  --accent-alt: #e8c9a4;      /* 深底上的暖金：hero 眉标 */
  --shade: rgba(60, 30, 10, 0.35); /* 深色遮罩（图片压暗、豆子中缝） */

  /* —— 深色底 —— */
  --dark: #44301e;            /* hero 底色 */
  --dark-2: #432309;          /* 页脚深色条 */
  --cream: #fbf3e8;           /* 深底上的浅色文字/按钮底 */

  /* —— 字体 —— */
  --font-sans: 'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-num: "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;

  /* —— 字号阶（升序）—— */
  --fs-1: 11.5px;
  --fs-2: 13px;
  --fs-3: 15px;
  --fs-4: 17px;
  --fs-5: 21px;
  --fs-6: 26px;
  --fs-7: 34px;
  --fs-8: 44px;
  --fs-9: 54px;

  /* —— 行高 —— */
  --lh-tight: 1.18;
  --lh-body: 1.85;

  /* —— 间距 —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 60px;

  /* —— 圆角 —— */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* —— 版心与阴影 —— */
  --wrap: 1386px;
  --shadow-card: 0 1px 2px rgba(66, 36, 15, 0.06), 0 8px 24px rgba(66, 36, 15, 0.05);
}