/* ---------------------------------------------------------------------------
   tokens.css —— 设计令牌（**必须先于 site.css 加载**，见 partials/header.php）

   为什么要它（2026-10-11）：UI 反复返工的根因不是审美，是**没有单一真相源**。
   证据：首页那三颗按钮在同一轮里改了四遍（等宽 → 允许折行 → 按内容定宽 → 整宽竖排 →
   又要横排），每次只是改裸数值；`hover-menu.v2.js` 用行内 `!important` 写 display，
   连着三版 CSS 都盖不住。间距/字号/圆角散在 4 个 css + 五六个页面的内联 <style> 里，
   断点还有 991 / 767 / 575 三档各写一遍 —— 每次动一处都要重新猜数值。

   用法：
     ✅  padding: var(--sp-4) var(--sp-5);   border-radius: var(--r-md);
     ❌  padding: 16px 24px;                  border-radius: 10px;

   ⚠️ **断点无法用变量**（media query 里不认 `var()`）——所以断点只作为**约定**写在下面，
      新代码只用这两档，别再引入第三档：
        ≥ 768px  = 桌面 / 平板
        ≤ 767.98px = 手机（site-mobile.css 里那一条）
      （`.98` 是为了避开 Bootstrap 的整数断点，别改成 768。）
   ⚠️ 颜色令牌（--accent / --navy / --border …）本来就在 site.css 里定义着，
      这里**只做索引与补充**，不重复声明，免得两处各说一个值。
   --------------------------------------------------------------------------- */

:root {
  /* ---- 颜色（**权威定义在 site.css**，这里只是把名字列出来，别在这里改值）----
     --accent      品牌强调色
     --accent-rgb  同上的 RGB 分量（给 rgba(var(--accent-rgb), .1) 这类用法）
     --navy        主文字色
     --navy-2      次级文字色
     --border      描边
     --light       浅底
     --muted       弱化文字
  */

  /* ---- 间距阶（4 的倍数；**不要再用 5px / 7px / 13px 这种裸值**）---- */
  --sp-1: .25rem;   /*  4px  —— 图标与文字之间 */
  --sp-2: .5rem;    /*  8px  —— 紧邻元素 */
  --sp-3: .75rem;   /* 12px  —— 卡片内边距（小） */
  --sp-4: 1rem;     /* 16px  —— 卡片内边距（默认） */
  --sp-5: 1.5rem;   /* 24px  —— 块与块之间 */
  --sp-6: 2.5rem;   /* 40px  —— 板块内边距（**首页现在就用这个**） */
  --sp-7: 4.5rem;   /* 72px  —— 板块内边距（site.css 的 .section 原来是这个，太大） */

  /* ---- 圆角阶 ---- */
  --r-sm: .375rem;  /*  6px  —— 小徽标 / chip 内元素 */
  --r-md: .625rem;  /* 10px  —— 按钮 / 输入框 / 卡片（默认） */
  --r-lg: 1rem;     /* 16px  —— 大卡片 / 弹窗 */
  --r-pill: 999px;  /* 胶囊 —— 筛选 chip / 头像 */

  /* ---- 字号阶（**默认站面字号偏小是刻意的**：信息密度高，B2B 买家看得惯）---- */
  --fs-xs: .72rem;    /* 11.5px —— 徽标 / 辅助说明 */
  --fs-sm: .8rem;     /* 12.8px —— 次要文字 / 列表副行 */
  --fs-base: .92rem;  /* 14.7px —— 正文（站面基准） */
  --fs-md: 1rem;      /* 16px  —— 强调正文 */
  --fs-lg: 1.2rem;    /* 19.2px —— 小标题 */
  --fs-xl: 1.5rem;    /* 24px  —— 标题 */
  --fs-hero: clamp(2.1rem, 4.4vw, 3.4rem);   /* 首页 h1（原来是 clamp，照搬） */

  /* ---- 行高 ---- */
  --lh-tight: 1.15;   /* 标题 / 按钮里的折行文字 */
  --lh-base: 1.5;     /* 正文 */

  /* ---- 阴影 ---- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-md: 0 .25rem .6rem rgba(0, 0, 0, .06);
  --shadow-lg: 0 .6rem 1.4rem rgba(0, 0, 0, .16);   /* 悬浮面板（手机 account 面板在用） */

  /* ---- 动效 ---- */
  --t-fast: .15s;
}