/* ==========================================================================
   tokens.css — 攀岩站唯一的设计变量来源
   三页（index / category / detail）都要先加载本文件，再加载 style.css / components.css
   变量值来自首页视觉稿读数，改色只改这里（style.css 的 :root 保持同值兜底）
   ========================================================================== */

:root {
  /* ---- 文字 ---- */
  --ink: #16222b;              /* 主文字（标题、正文强调） */
  --ink-soft: #23313c;         /* 导航、次级标题 */
  --muted: #5f6d76;            /* 说明文字 */
  --muted-2: #6a7680;          /* 卡片摘要、辅助信息 */
  --muted-light: #9aa4ab;      /* 输入框占位、极弱提示 */

  /* ---- 背景 ---- */
  --paper: #f7f6f3;            /* 页面底色（纸白） */
  --paper-2: #e9e8e4;          /* 交替灰底（分类区） */
  --surface: #ffffff;          /* 卡片面 */
  --band: #1e2f3c;             /* 深墨通栏（专题、安全条） */
  --footer: #1b2b36;           /* 页脚 */
  --image-placeholder: #d8d6d0;

  /* ---- 线 ---- */
  --line: #e3e0d9;             /* 分隔线、卡片描边 */
  --line-on-dark: rgba(255, 255, 255, 0.22);
  --hairline: rgba(22, 34, 43, 0.14);

  /* ---- 强调 ---- */
  --accent: #e8873a;           /* 主按钮、竖条、圆点 */
  --accent-dark: #d9762b;      /* hover / 链接强调 */
  --accent-soft: #f4e6c8;      /* 栏目胶囊底 */
  --accent-soft-ink: #8a5a15;  /* 栏目胶囊字 */
  --accent-tint: #ffd9b8;      /* 深底上的浅强调 */

  /* ---- 深底上的文字 ---- */
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.74);
  --on-dark-faint: rgba(255, 255, 255, 0.55);
  --scrim: rgba(30, 47, 60, 0.86);      /* 图片上压字用的遮罩 */
  --scrim-ink: rgba(14, 24, 32, 0.82);  /* 照片带 CTA 的遮罩 */
  --paper-scrim: rgba(247, 246, 243, 0.96); /* 首屏左侧提亮遮罩 */

  /* ---- 字号阶（1440 设计宽） ---- */
  --fs-1: 11.5px;   /* 栏目胶囊 */
  --fs-2: 12px;     /* 行内摘要 */
  --fs-3: 12.5px;   /* 卡片摘要、页脚说明 */
  --fs-4: 13px;     /* 装备说明 */
  --fs-5: 13.5px;   /* 分类卡说明、CTA 说明 */
  --fs-6: 14px;     /* 小节按钮 */
  --fs-7: 14.5px;   /* 列表摘要、安全条 */
  --fs-8: 15px;     /* 导航、按钮、列表标题 */
  --fs-9: 15.5px;   /* 卡标题 */
  --fs-10: 16px;    /* 装备名 */
  --fs-11: 18px;    /* 首屏导语 */
  --fs-12: 19px;    /* 移动端小节标题 */
  --fs-13: 20px;    /* 页脚品牌 */
  --fs-14: 22px;    /* 小节标题 */
  --fs-15: 24px;    /* 移动端 CTA 标题 */
  --fs-16: 26px;    /* 移动端专题标题 */
  --fs-17: 30px;    /* CTA 标题 */
  --fs-18: 32px;    /* 移动端首屏标题 */
  --fs-19: 34px;    /* 专题标题 */
  --fs-20: 38px;    /* 平板首屏标题 */
  --fs-21: 44px;    /* 首屏标题 */

  /* ---- 行高 ---- */
  --lh-tight: 1.1;
  --lh-title: 1.4;
  --lh-body: 1.7;
  --lh-loose: 1.78;

  /* ---- 圆角 ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 10px;
  --r-6: 12px;
  --r-pill: 999px;
  --radius-card: 10px;  /* 兼容 style.css 旧变量名 */
  --radius-img: 8px;

  /* ---- 阴影 ---- */
  --shadow-card: 0 2px 10px rgba(22, 34, 43, 0.06);
  --shadow-pop: 0 8px 22px rgba(22, 34, 43, 0.1);
  --shadow-accent: 0 6px 16px rgba(232, 135, 58, 0.28);

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

  /* ---- 容器 ---- */
  --container: 1328px;
  --gutter: 24px;
  --section-y: 30px;
}