/* ==========================================================================
   tokens.css · 设计令牌 (Design Tokens)
   --------------------------------------------------------------------------
   关务职业技能水平评价 · 考试平台
   本文件是全站唯一的「视觉变量来源」。改品牌 VI 只需要改这里，无需动任何组件。
   所有色值均已通过 WCAG 2.1 AA 对比度校验（正文 ≥4.5:1，大字号 ≥3:1）。
   ========================================================================== */

:root {

  /* ---------- 品牌色 ①：深海蓝 · 权威与结构 ----------
     承载：导航、标题、结构线、数据、已完成的进度节点。
     使用面积：约 60%（页面主导色）。                                   */
  --navy-950: #04121F;   /* 页脚底、顶栏底 —— 全站最深 */
  --navy-900: #061B33;   /* 深色区块底（metrics / cert-card 起点） */
  --navy-800: #0B2D5B;   /* 主品牌色：主按钮、品牌标记、当前进度 */
  --navy-700: #12417E;   /* 主按钮 hover、深底上的强调色 */
  --navy-600: #1B57A5;   /* 链接、栏位编号、焦点环 */
  --navy-500: #3A78C2;   /* 预留：图表主色 */
  --navy-200: #BFD3EC;   /* 卡片 hover 边框、深底上的浅色描边 */
  --navy-100: #E6EEF8;   /* 徽标底、索引块底 */
  --navy-50:  #F2F6FC;   /* 区块浅底、表头底、hover 底 */

  /* ---------- 品牌色 ②：中国红 · 行动与紧迫 ----------
     承载：报考 / 缴费 / 提交 / 截止警示 / 当前步骤。
     使用面积：严格控制在 3% 以内 —— 一旦稀释，「立刻报名」的紧迫感就没了。 */
  --red-700: #A00D25;    /* 红色按钮 hover */
  --red-600: #C8102E;    /* 行动色（唯一） */
  --red-100: #FBE7EA;    /* 红色徽标底 */
  --red-50:  #FDF4F5;    /* 警示条底 */

  /* ---------- 品牌色 ③：铜金 · 荣誉与证书 ----------
     承载：证书、铜牌、荣誉标识。不得用于按钮或状态。                     */
  --gold-700: #7C5A26;   /* 金底上的文字（满足 AA） */
  --gold-600: #96692C;   /* 金色按钮底、金色徽标文字 */
  --gold-500: #A87C3D;   /* 装饰描边、金底渐变起点 */
  --gold-100: #F7F0E2;   /* 金色徽标底、金色提示条底 */

  /* ---------- 语义状态色 ---------- */
  --amber-600: #7A4E09;  /* 待缴费 / 待处理（金底上文字） */
  --amber-50:  #FDF6E7;
  --green-600: #1B7F4B;  /* 已通过 / 已完成 / 成功 */
  --green-50:  #EAF6EF;

  /* ---------- 中性色（Ink 灰阶）----------
     注意：ink-300 仅用于装饰线，不可承载文字。                          */
  --ink-900: #14181F;    /* 标题正文 */
  --ink-700: #39424F;    /* 正文（默认） */
  --ink-500: #5A6472;    /* 次级文字：说明、副标题 */
  --ink-400: #667081;    /* 三级文字：提示、标签（白底对比度 5.31:1，达标 AA） */
  --ink-300: #C3CAD6;    /* 装饰：分隔符、禁用图形 */
  --line:        #E2E8F2; /* 常规分割线 */
  --line-strong: #CBD6E6; /* 输入框边框、强调分割线 */
  --paper:  #FFFFFF;      /* 卡片、面板底 */
  --canvas: #F5F7FA;      /* 页面底 */

  /* ---------- 字型 ----------
     标题用衬线宋体传达「正规试卷 / 正式文件」的权威感；
     界面用无衬线黑体保证小字号可读；
     数据（编号、金额、时间、单号）一律等宽，防跳字。

     ⚠️ 部署说明（重要）
     下面三个变量**不引用任何外部 CDN**。字体按以下优先级逐级回退：

       第一优先：本地自托管字体（见 fonts.css，需自行放入 woff2 文件）
       第二优先：操作系统自带的中文字体

     这样做的原因：本平台面向政务与职教场景，存在内网部署、离线演示、
     专网环境等诉求，任何外链字体都会导致这些场景下字体静默失效。
     如果客户提供了品牌字体，把 woff2 放进 assets/fonts/ 并在
     fonts.css 里补 @font-face 即可，无需改动本文件。
     ------------------------------------------------------------------ */
  --ff-display: "Noto Serif SC Local","Source Han Serif SC","Songti SC","STZhongsong","SimSun","Noto Serif CJK SC",serif;
  --ff-ui:      "Noto Sans SC Local","HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:    "JetBrains Mono Local","Cascadia Mono","Consolas","Menlo","DejaVu Sans Mono",monospace;

  /* ---------- 字号梯度 ----------
     桌面端用 clamp() 自适应，移动端回落到最小值，共 9 级。               */
  --fs-display: clamp(32px, 3.6vw, 52px);  /* 首页主标题 */
  --fs-h1:      clamp(26px, 2.6vw, 36px);  /* 区块主标题 */
  --fs-h2:      clamp(22px, 2vw,   28px);  /* 区块标题 */
  --fs-h3:      19px;                      /* 卡片组标题 */
  --fs-h4:      16px;                      /* 卡片标题 */
  --fs-body:    15px;                      /* 正文基准 */
  --fs-sm:      13.5px;                    /* 次级正文、按钮 */
  --fs-xs:      12px;                      /* 标签、提示 */
  --fs-micro:   11px;                      /* 栏位编号、极简标注 */

  /* ---------- 行高 ---------- */
  --lh-display: 1.18;   /* 大标题 */
  --lh-head:    1.34;   /* 中小标题 */
  --lh-body:    1.75;   /* 中文正文（中文需要比西文更大的行距） */

  /* ---------- 间距标尺（8pt 基准）---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 80px;  --sp-10: 104px;

  /* ---------- 圆角 ----------
     刻意保持小半径（2–10px）：这是公文/证件的质感，不是消费级 App。      */
  --r-xs: 2px;   /* 徽标、栏位条 */
  --r-sm: 4px;   /* 按钮、输入框、小面板 */
  --r-md: 6px;   /* 卡片 */
  --r-lg: 10px;  /* 大面板、证书卡 */

  /* ---------- 阴影 ----------
     统一用低饱和蓝调而非中性黑，避免灰扑扑的廉价感。                   */
  --sh-1:     0 1px 2px rgba(11, 45, 91, .06);
  --sh-2:     0 4px 16px rgba(11, 45, 91, .07);
  --sh-3:     0 14px 36px rgba(6, 27, 51, .12);
  --sh-inset: inset 0 0 0 1px var(--line);

  /* ---------- 动效 ----------
     全站只允许 220ms / 300ms 两档；超过 300ms 的过渡在政务类产品里显得拖沓。 */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --dur:      220ms;
  --dur-slow: 300ms;

  /* ---------- 布局常量 ---------- */
  --w-page:    1200px;  /* 内容最大宽度 */
  --h-header:  68px;    /* 吸顶页头高度（粘性定位的 top 偏移依赖它） */
}