/* ===========================================================================
   边境梗犬科普知识网 · 设计 token（唯一变量来源）
   三页（index / category / detail）都先链本文件，再链 style.css、components.css。
   取值来自 03-ui/home-ui-desktop.png（1440 设计宽）；改动后必须重跑 compare。
   ---------------------------------------------------------------------------
   命名原则：语义名（bg / ink / accent / line），不用 --c1 / --color-3。
   本文件由人工整理（extract.mjs 的自动结果只作参考，不作为真相）。
   =========================================================================== */

:root {
  /* ── 色板 ─────────────────────────────────────────────────────────── */
  --bg: #f5f0e6;              /* 页面底色：暖米 */
  --header: #f7f3ea;          /* 顶部导航底色 */
  --band: #efe9dc;            /* 通栏浅带：内页页头 */
  --card: #fbf7ee;            /* 卡片底：面板、条目卡 */
  --card-soft: #f1ebde;       /* 更浅的卡片底（筛选条、相关条目） */
  --paper: #fffdf8;           /* 白卡底 */
  --ink: #2c332c;             /* 主文字 */
  --ink-2: #4f564b;           /* 正文次级文字 */
  --ink-3: #75776a;           /* 注释 / 元信息 */
  --accent: #3c5638;          /* 主强调色：深草绿（标题条、页脚、主按钮） */
  --accent-deep: #2f452c;     /* 强调色加深一档 */
  --accent-mid: #587450;      /* 中绿：勾选图标、链接 hover */
  --accent-soft: #d9dfc9;     /* 浅绿：图片占位、tag 底 */
  --olive: #6d7434;           /* 橄榄金：首屏主按钮 */
  --olive-deep: #5b6230;      /* 橄榄金 hover */
  --ochre: #b58a3e;           /* 赭石：分类序号、少量装饰点 */
  --line: rgba(44, 51, 44, 0.13);        /* 浅底分隔线 */
  --line-strong: rgba(44, 51, 44, 0.22); /* 浅底较强分隔线 / 描边按钮 */
  --line-invert: rgba(247, 243, 233, 0.24); /* 深底分隔线 */
  --on-accent: #f7f3e9;       /* 深底上的文字 */
  --on-accent-soft: rgba(247, 243, 233, 0.72); /* 深底上的次要文字 */
  --ink-invert: #fffdf6;      /* 深底上的高对比文字（首屏副标） */

  /* ── 版式 ─────────────────────────────────────────────────────────── */
  --container: 1368px;        /* 内容栏宽度（1440 − 2×36） */
  --gutter: 36px;             /* 左右安全边距 */
  --measure: 720px;           /* 正文舒适行长 */
  --radius-card: 16px;        /* 面板圆角 */
  --radius-md: 12px;          /* 中卡圆角 */
  --radius-sm: 8px;           /* 小方块圆角 */
  --radius-pill: 999px;       /* 胶囊按钮 / chip */

  /* ── 字号阶（px，1440 基准） ──────────────────────────────────────── */
  --fs-display: 62px;         /* 首屏 h1（中文主标） */
  --fs-h1-page: 46px;         /* 内页 h1 */
  --fs-h2: 24px;              /* 区块标题（备用） */
  --fs-h2-sm: 21px;           /* 窄列区块标题 */
  --fs-h3: 17px;              /* 卡片标题 */
  --fs-lead: 15.5px;          /* 导语 / 卡片副标 */
  --fs-body: 15px;            /* 正文 */
  --fs-sm: 13.5px;            /* 卡片正文 */
  --fs-note: 12px;            /* 注释 */
  --fs-micro: 11px;           /* 密集信息（步骤说明、毛色说明） */
  --fs-bar: 13px;             /* 面板标题条 */

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

  /* ── 阴影与动效 ───────────────────────────────────────────────────── */
  --shadow-card: 0 1px 2px rgba(44, 51, 44, 0.05);
  --shadow-hover: 0 10px 24px rgba(44, 51, 44, 0.12);
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: .18s;
}