/* ============================================================================
 * 彤梦焙语 · 内部运营平台 — 设计 Token 唯一源
 * 版本 v1.0 · 2026-09-20 · 规范见项目根 DESIGN.md
 * ----------------------------------------------------------------------------
 * 用法：在页面 <head> 中最先引入（早于页面自身的 <style>）：
 *     <link rel="stylesheet" href="design-tokens.css?v=20260920dt1">
 *
 * 铁律：
 *   1) 页面内**不得**再定义 --primary / --bg / --card 等语义变量，一律引用本文件。
 *   2) 页面内**不得**写十六进制色值（图表内联色除外，且须取自 --chart-* ）。
 *   3) 本文件只声明变量，不产生任何选择器副作用 —— 引入它不会改变现有页面样式；
 *      页面按 4.x 节逐一改用 token 才会生效（可灰度、可回退）。
 * ========================================================================= */

:root{
  /* ── 品牌色阶（焦糖）──────────────────────────────────────────────── */
  --brand-50:#FFF8F0;
  --brand-100:#FDECDD;
  --brand-200:#F9D5B8;
  --brand-300:#F2B98C;
  --brand-400:#EA9C5F;
  --brand-500:#E8833A;   /* 品牌主色：填充/图标/图表；白底对比 2.71:1，禁止小字 */
  --brand-600:#B85E1E;   /* 主操作填充：白字 4.51:1 ✓ */
  --brand-700:#964B18;   /* 链接/强调：白底 6.33:1 ✓ */
  --brand-800:#6E3711;
  --brand-900:#4A250B;

  /* ── 中性色阶（暖灰）──────────────────────────────────────────────── */
  --n-0:#FFFFFF;
  --n-50:#FDFBF9;
  --n-100:#F7F3EE;
  --n-200:#EDE3D6;       /* 发丝边框（默认） */
  --n-300:#DCCEBB;       /* 强边框 / 输入描边 */
  --n-400:#A99E8F;       /* 禁用 / placeholder */
  --n-500:#6B6157;       /* 辅助文字 5.38:1 ✓ */
  --n-600:#5C534A;       /* 次级正文 6.69:1 ✓ */
  --n-700:#3D342C;       /* 默认正文 10.8:1 ✓ */
  --n-800:#2A231D;       /* 标题 */
  --n-900:#1A1512;       /* 最高对比 / Toast 底 */

  /* ── 表面与画布 ───────────────────────────────────────────────────── */
  --surface-canvas:#FBF6F0;
  --surface-1:#FFFFFF;
  --surface-2:#F5EFE7;   /* 下沉：输入框 / 分段轨道 */
  --surface-3:#F2EBE1;   /* hover */
  --surface-scrim:rgba(26,21,18,.45);

  /* 语义别名（兼容现有页面命名，指向同一 token） */
  --bg:var(--surface-canvas);
  --card:var(--surface-1);
  --border:var(--n-200);
  --text:var(--n-700);
  --text-sub:var(--n-600);
  --text-mute:var(--n-500);
  --primary:var(--brand-500);
  --primary-light:var(--brand-300);
  --caramel:var(--brand-400);
  --caramel-bg:var(--brand-50);

  /* ── 语义色（系统状态）────────────────────────────────────────────── */
  --success:#1E7A46;
  --warning:#A6611A;
  --danger:#B3261E;
  --info:#2C6FA8;
  --success-bg:#E8F1EA;
  --warning-bg:#FAF0E1;
  --danger-bg:#FBEAE8;
  --info-bg:#E9F0F6;
  /* 语义态边框：与各自的 -bg 成对使用，避免页面内写死描边色 */
  --success-border:#C6DFCE;
  --warning-border:#EBD9BE;
  --danger-border:#F0CFCB;
  --info-border:#CBDCE9;
  /* ⚠ 以下两个别名补齐历史引用：hr_admin.html / employee_center.html 曾用
     var(--danger)/var(--ok) 但 :root 未定义 → 颜色静默失效。此处正式定义，
     引入本文件即自动修复该缺陷，无需改动那两页。 */
  --ok:var(--success);
  --red:#B3261E;
  --green:#1E7A46;

  /* ── 涨跌（中国区惯例：涨红跌绿，不得反转）────────────────────────── */
  --rise:#B3261E;
  --fall:#1E7A46;
  --flat:#6B6157;

  /* ── 图表序列（固定 7 色顺序，不得跳序自造）───────────────────────── */
  --chart-1:#E8833A;
  --chart-2:#2C6FA8;
  --chart-3:#1E7A46;
  --chart-4:#B3261E;
  --chart-5:#A6611A;
  --chart-6:#7A5EA8;
  --chart-7:#6B6157;

  /* ── 间距（基数 4px，只允许这些取值）─────────────────────────────── */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* ── 圆角（只允许这七档）──────────────────────────────────────────── */
  --r-xs:4px;   /* 细标签 / 表格框架 */
  --r-sm:6px;   /* 密集区小元素 */
  --r-md:8px;   /* 输入框 */
  --r-btn:10px; /* 按钮 */
  --r-lg:12px;  /* 卡片（默认） */
  --r-xl:16px;  /* 抽屉 / 大面板 */
  --r-pill:999px;
  --radius:var(--r-lg);   /* 兼容旧命名 */

  /* ── 阴影（暖棕基色 #4A250B，禁用纯黑阴影）────────────────────────── */
  --shadow-1:0 1px 2px rgba(74,37,11,.05), 0 1px 3px rgba(74,37,11,.04);
  --shadow-2:0 2px 6px rgba(74,37,11,.06), 0 8px 20px rgba(74,37,11,.05);
  --shadow-3:0 8px 24px rgba(74,37,11,.10), 0 2px 6px rgba(74,37,11,.06);
  --shadow-sheet:0 -8px 28px rgba(74,37,11,.14);
  --shadow-focus:0 0 0 3px rgba(232,131,58,.35);
  --shadow:var(--shadow-1);   /* 兼容旧命名 */

  /* ── 字体 ─────────────────────────────────────────────────────────── */
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC",
              "Microsoft YaHei","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;

  /* ── 字号层级（移动优先；桌面用媒体查询覆盖）───────────────────────── */
  --fs-display:30px; --fs-h1:24px; --fs-h2:20px; --fs-h3:17px;
  --fs-body-lg:16px; --fs-body:15px; --fs-body-sm:13.5px;
  --fs-caption:12.5px; --fs-micro:12px;
  --fs-num-hero:28px; --fs-num-lg:20px; --fs-num-md:15px; --fs-num-sm:13px;

  /* ── Z-index 阶梯 ─────────────────────────────────────────────────── */
  --z-sticky:10; --z-appbar:50; --z-tabbar:60; --z-dropdown:70;
  --z-sheet:80; --z-toast:90; --z-login:100; --z-urgent:999;

  /* ── 布局 ─────────────────────────────────────────────────────────── */
  --gutter-mobile:16px;
  --gutter-desktop:24px;
  --container-max:1280px;
  --tabbar-h:56px;
  --appbar-h:52px;
}

/* ── 桌面端字号微调（正文收 1px，指标放大）───────────────────────────── */
@media (min-width:1024px){
  :root{
    --fs-display:34px; --fs-h1:28px; --fs-h2:22px; --fs-h3:18px;
    --fs-body:14px; --fs-body-sm:13px;
    --fs-num-hero:32px; --fs-num-lg:22px;
  }
}

/* ── 基础归一：等宽数字工具类（全站金额/数量/占比必须挂 .num）──────────── */
.num,tnum,[data-num]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* ── 通用无障碍：键盘焦点环 + 尊重「减少动态效果」偏好 ─────────────────── */
:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
