/* ==========================================================================
   tokens.css — 设计令牌（全站唯一来源）
   颜色按「用途」拆：填充 / 文字 / 图形 各一支，避免一套色两头不达标
   宽度只留两档：容器 + 长文
   ========================================================================== */

:root {
  /* ---- 品牌：填充（考核「压在上面的前景读得清吗」） ---- */
  --brand: #ff9e1b;           /* 按钮底、图标块底 */
  --brand-strong: #ff7a00;    /* 按压态 */
  --brand-mark: #ff9e1b;      /* 只做图形：圆点、描边 */
  --brand-surface: #ffedd5;   /* 浅品牌底（眉标胶囊、选中片） */
  --brand-surface-2: #ffe0b8; /* 再浅一档的品牌底 */

  /* 压在 --brand 填充上的前景色（文字或图形）：白压橙只有 2.07:1，一律用深色 */
  --on-brand: #2a1a05;        /* 压 #FF9E1B 上 8.14:1 */

  /* ---- 品牌：文字（考核「压在纸底读得清吗」） ---- */
  --brand-ink: #a8340a;       /* 浅底上的品牌文字：#FFFDF8 上 6.5:1，#FFEDD5 上 5.8:1 */
  --accent: #e01b30;          /* 鼻血版标签底（比 #FF3B4E 深一档，白字才够 4.8:1） */

  /* ---- 文字：浅底三级 ---- */
  --text: #1f1a17;            /* 标题 */
  --text-body: #4a4038;       /* 正文 */
  --text-muted: #6b5f52;      /* 次级：#FFFDF8 上 6.1:1 */

  /* ---- 文字：深底三级 ---- */
  --text-invert: #ffffff;
  --text-invert-body: #e8dfd2;
  --text-invert-mute: #b5a894; /* #1F1A17 上 7.4:1 */

  /* ---- 面 ---- */
  --paper: #fffdf8;           /* 页面底：暖白 */
  --surface: #ffffff;         /* 卡片 */
  --surface-warm: #fff4e2;    /* 暖黄区 */
  --surface-cream: #fff9f0;   /* 屏内 / 浅米 */
  --surface-sunk: #fff1d9;    /* 屏内控件 */
  --ink: #1f1a17;             /* 深色卡 */
  --ink-deep: #100d0b;        /* 页脚 */
  --screen-dark: #241c2e;     /* 阅读器屏底 */

  /* ---- 线 ---- */
  --line: #f0e4d4;
  --line-warm: #ffe2c0;
  --line-invert: #2a2320;
  --line-device: #e8ded1;

  /* ---- 尺寸 ---- */
  --w-container: 1200px;      /* 唯一的内容宽度档 */
  --w-prose: 760px;           /* 唯一的阅读宽度档 */

  /* ---- 圆角（四档） ---- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-pill: 999px;

  /* ---- 间距（七档） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 64px;

  /* ---- 字号阶梯 ---- */
  --fs-display: 54px;   /* 首页首屏标题 */
  --fs-h1: 44px;        /* 内页页头标题 */
  --fs-h2: 36px;        /* 区块标题 */
  --fs-h3: 30px;        /* 小区块标题 */
  --fs-h4: 22px;        /* 品类卡文字 */
  --fs-title: 18px;     /* 卡片标题、问答标题 */
  --fs-lg: 17px;        /* 导语 */
  --fs-base: 15px;      /* 正文 */
  --fs-sm: 14px;        /* 卡片描述 */
  --fs-xs: 13px;        /* 元信息 */
  --fs-2xs: 12px;       /* 目录小标 */

  /* ---- 字体 ---- */
  --font-sans: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-en: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS",
    system-ui, sans-serif;

  /* ---- 层级 ---- */
  --z-nav: 60;
  --z-header: 50;
}