/* ===========================================================================
   贝灵顿梗犬百科 · 设计 token
   唯一变量来源：三页（index / category / detail）都先链本文件，再链 style.css、components.css。
   取值来自 03-ui/home-ui-desktop.png（1440 设计宽）；改动后必须重跑 compare。
   =========================================================================== */

:root {
  /* ── 色板（从视觉稿取样，语义命名） ───────────────────────────────── */
  --bg: #f7f5ef;              /* 页面底色：暖白 */
  --header: #f4f1e8;          /* 顶部导航底色 */
  --band: #e9e1d3;            /* 通栏浅带：首屏、分类页头、详情页头 */
  --card: #ece8db;            /* 卡片米色底 */
  --card-soft: #f2eee3;       /* 更浅的卡片底（相关条目区） */
  --paper: #fcf9f3;           /* 白卡底（分类卡、条目卡） */
  --ink: #2f3330;             /* 主文字 */
  --ink-2: #55564e;           /* 正文次级文字 */
  --ink-3: #6b6a5f;           /* 注释 / 元信息 */
  --accent: #3b5443;          /* 主强调色：深墨绿（按钮、页脚、标题装饰） */
  --accent-deep: #2f4436;     /* 强调色 hover / 深一档 */
  --accent-mid: #51664f;      /* 中绿：CTA 通栏、勾选图标 */
  --accent-soft: #cfd7c7;     /* 浅绿：图片占位底 */
  --warm: #b48744;            /* 暖棕：价格类装饰点 */
  --line: rgba(47, 51, 48, 0.14);      /* 浅底分隔线 */
  --line-invert: rgba(246, 243, 234, 0.24); /* 深底分隔线 */
  --on-accent: #f6f3ea;       /* 深底上的文字 */
  --on-accent-soft: rgba(246, 243, 234, 0.66); /* 深底上的次要文字 */

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

  /* ── 字号阶（px，1440 基准；窄屏用 clamp 或媒体查询下调） ─────────── */
  --fs-h1: 66px;              /* 首屏 h1 */
  --fs-h1-page: 42px;         /* 内页 h1 */
  --fs-h2: 23px;              /* 区块标题 */
  --fs-h3: 16px;              /* 卡片标题 */
  --fs-lead: 16px;            /* 导语 / 卡片副标 */
  --fs-body: 15px;            /* 正文 */
  --fs-body-sm: 13px;         /* 卡片正文 */
  --fs-note: 12px;            /* 注释 */
  --fs-micro: 10.8px;         /* 密集信息（步骤说明、毛色说明） */
  --fs-kicker: 0.72em;        /* 拉丁大写 kicker（相对字号） */

  /* ── 字体 ─────────────────────────────────────────────────────── */
  --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(47, 51, 48, 0.04);
  --shadow-hover: 0 8px 20px rgba(47, 51, 48, 0.10);
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: .18s;
}