/* ==========================================================================
   tokens.css — 设计令牌，全站唯一来源
   颜色按用途拆分：填充 / 文字 / 图形各用各的，避免一支色通吃导致对比度翻车
   ========================================================================== */

:root {
  /* 品牌红：取自 LOGO（#F81223 → #E90006） */
  --brand: #e60012;        /* 只做填充：按钮底、选中片、竖条、徽标 */
  --brand-ink: #c00010;    /* 只做文字：浅底上的红字与链接（5.9:1 起） */
  --brand-mark: #e60012;   /* 只做图形：圆点、序号、图标描边 */
  --brand-surface: #fff1f2;  /* 浅红底：提示条、序号块 */
  --brand-on-dark: #ff5a62;  /* 深底上的红字（页脚栏目名用） */

  /* 中性：浅底 */
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --line: #e9ebef;
  --line-soft: #eff0f3;

  /* 文字：浅底三级，全部 ≥4.5:1 */
  --text: #1f2126;
  --text-body: #4b5058;
  --text-muted: #646b78;   /* 浅灰底上也过 4.5:1 */

  /* 文字与分隔线：深底 */
  --footer: #23262c;
  --line-invert: #3a3e46;
  --text-invert: #ffffff;
  --text-invert-body: #d5d9df;
  --text-invert-mute: #a8aeb7;

  /* 内容宽度：正文只有 720 一档，版心 1312 一档 */
  --w-container: 1312px;
  --w-prose: 720px;
  /* 正文卡外框 = 720 正文 + 左右各 36 内边距；文章页右辅栏 */
  --w-article: 792px;
  --w-aside: 470px;

  /* 圆角 */
  --r-card: 12px;
  --r-btn: 9px;
  --r-pill: 20px;
  --r-tile: 10px;

  /* 字号 */
  --fs-h1: 40px;
  --fs-h1-article: 32px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-lead: 15px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-tiny: 11px;
  --fs-mini: 10px;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 36px;
  --sp-9: 44px;
  --sp-10: 64px;

  /* 版心左右留白 */
  --gutter: 64px;

  /* 字体：全站黑体，不引外链字体 */
  --font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", system-ui, -apple-system, sans-serif;
  --font-num: "Inter", "Noto Sans SC", system-ui, sans-serif;
}

/* 移动端整体降档：改这一处全站生效 */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 32px;
    --fs-h1-article: 28px;
    --fs-h2: 21px;
    --fs-h3: 18px;
    --fs-h4: 16px;
    --gutter: 32px;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-h1: 26px;
    --fs-h1-article: 23px;
    --fs-h2: 19px;
    --fs-h3: 17px;
    --fs-h4: 15px;
    --fs-lead: 14px;
    --fs-body: 14px;
    --gutter: 18px;
  }
}