/* tokens.css — 登山 · 唯一设计变量来源
   首页（style.css）、内页（category.html / detail.html）与 components.css 全部引用这里；
   新增变量必须在本文件登记用途，不要在页面里写颜色/字号/圆角字面量。 */
:root {
  /* ===== 颜色：底色与表面 ===== */
  --bg: #f2f2f2;                    /* 页面浅底 */
  --surface: #ffffff;               /* 卡面 / 悬停提升 */
  --surface-muted: #f3f3f3;         /* 分类卡底色 */
  --surface-soft: #e8eee9;          /* 技能卡浅绿底 */
  --surface-deep: #243444;          /* hero 深藏青 */
  --surface-deep-2: #1f3231;        /* 安全横幅墨绿 */
  --surface-footer: #252e38;        /* 页脚深灰蓝 */
  --surface-header: #2a4056;        /* 页头/移动导航 */

  /* ===== 颜色：文字 ===== */
  --ink: #141a20;                   /* 标题 */
  --ink-body: #333c44;              /* 正文 */
  --ink-muted: #5c6670;             /* 次要文字 / 摘要 */
  --ink-faint: #8a939b;             /* 元信息 */
  --ink-on-dark: #f7f8f8;           /* 深底标题 */
  --ink-on-dark-muted: rgba(247, 248, 248, 0.72);
  --ink-invert: #ffffff;            /* 深底强调文字 */

  /* ===== 颜色：强调与线 ===== */
  --accent: #3f8a6f;                /* 主强调：按钮 / 竖条 / active */
  --accent-strong: #2f6f59;         /* 悬停 / 链接 */
  --accent-soft: #e8eee9;           /* 浅绿块 */
  --accent-on-dark: #8fc0a9;        /* 深底上的图标与圆点 */
  --accent-line: rgba(63, 138, 111, 0.28);
  --line: #e2e4e3;                  /* 浅底分隔线 */
  --line-strong: #d3d7d5;           /* 边框 / 圆环 */
  --line-on-dark: rgba(255, 255, 255, 0.1);
  --shade: rgba(20, 30, 40, 0.35);  /* 图片压暗遮罩起点 */

  /* ===== 字号阶（内页统一用这套，不写 px） ===== */
  --fs-h1: clamp(37.6px, 4.45vw, 64px);
  --fs-h2: clamp(22.4px, 1.95vw, 28px);
  --fs-h3: 15.5px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;

  /* ===== 字体 ===== */
  --font-sans: 'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ===== 圆角 ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ===== 阴影与布局 ===== */
  --shadow-header: 0 18px 30px rgba(10, 20, 30, 0.3);
  --container: 1320px;
  --gutter: 24px;
  --section-py: 46px;
  --header-h: 56px;

  /* ===== 动效 ===== */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.28s;
}