/* tokens.css — 烘焙工具的设计变量（唯一来源）
 * 由 site-design-system/extract.mjs 抽取后人工语义化整理；
 * 值与 style.css 的 :root 保持一致，新增变量时两处同步。
 * 内页（category.html / detail.html）必须 link 本文件。
 */
:root {
  /* ---------- 颜色：背景层 ---------- */
  --bg: #f5ede3;            /* 页面底色（暖纸白） */
  --panel: #f2e8db;         /* 事实条 / 分类说明面板 */
  --box: #f0e5d6;           /* 四个数字方块 */
  --panel-deep: #eadcc7;    /* 器具准则面板（更深一档） */
  --card: #fbf6ee;          /* 卡片底色（比页面亮） */
  --tag-bg: #f4e4d8;        /* 分类标签底色 */

  /* ---------- 颜色：文字 ---------- */
  --ink: #1b1f1c;           /* 标题 */
  --body: #33342c;          /* 正文 */
  --body-soft: #57513f;     /* 卡片摘要、次级正文 */
  --muted: #6f6a5c;         /* 日期、注脚 */
  --surface: #33322a;       /* 导航项文字 */

  /* ---------- 颜色：品牌与分隔 ---------- */
  --accent: #8c392e;        /* 唯一点缀色：竖条、标签、CTA、图标 */
  --accent-soft: #a9553f;   /* 点缀色的浅一档（hover） */
  --green: #12281c;         /* 指标数字（深墨绿） */
  --on-accent: #fdf3e8;     /* 强调色上的文字 */
  --line: #e2d6c4;          /* 分隔线 */
  --line-strong: #d3c4ae;   /* 卡片描边、chip 边框 */
  --footer-bg: #2d3b30;     /* 页脚底色 */
  --footer-ink: #e8e2d5;    /* 页脚文字 */
  --line-invert: rgba(255, 255, 255, .28); /* 页脚/CTA 分隔 */

  /* ---------- 字体 ---------- */
  --serif: 'Songti SC',SimSun,'Noto Serif SC',Georgia,serif;
  --sans: 'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  /* ---------- 字号阶（与 style.css / components.css 实际取值对应） ---------- */
  --fs-xs: 10.5px;   /* chip、日期 */
  --fs-sm: 11.5px;   /* 卡片摘要、注脚 */
  --fs-base: 12.5px; /* 导航、工具条、说明 */
  --fs-md: 13.5px;   /* 导语、按钮 */
  --fs-body: 14px;   /* 正文 */
  --fs-lg: 15px;     /* 文章正文、分类导语 */
  --fs-xl: 16.5px;   /* 精选卡标题 */
  --fs-2xl: 20px;    /* 区块小标题 */
  --fs-3xl: 23px;    /* 栏目标题 */
  --fs-4xl: 27px;    /* 事实条标题 */
  --fs-5xl: 40px;    /* 指标数字 */
  --fs-hero: 46px;   /* 首页 h1 */

  /* ---------- 间距 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 34px;
  --space-7: 54px;

  /* ---------- 形状与阴影 ---------- */
  --radius-sm: 2px;   /* chip / 标签 */
  --radius-card: 4px; /* 卡片 */
  --radius: 5px;      /* 面板 */
  --wrap: 1364px;     /* 内容容器 */
  --shadow-1: 0 14px 30px rgba(27, 31, 28, .08); /* 移动抽屉 */

  /* ---------- 遮罩 ---------- */
  --mask-fade: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .6) 9%, #000 20%);
}