/* ============================================================================
 * mt5.email · 设计令牌（Design Tokens）—— 唯一真源
 * ----------------------------------------------------------------------------
 * ⛔ 铁律：组件层**只允许**引用语义令牌（第二段），⛔ 不许直接写原始色阶或十六进制。
 *    理由：原始色阶是"颜料"，语义令牌是"用途"。组件直接抓颜料的那一刻，
 *    换主题、改品牌色、做暗色适配就全会漏 —— 因为漏改的地方不会报错，只会难看。
 *
 * 组织顺序：
 *    1. 原始色阶（primitive）—— 只做调色板，不给组件用
 *    2. 语义令牌（semantic）—— 暗色（产品主线）
 *    3. 亮色主题覆盖
 *    4. 字体 / 字号 / 行高 / 字距
 *    5. 间距 / 圆角 / 阴影 / 动效 / 层级 / 布局常量
 *
 * 对比度（WCAG 2.1）均在文件内标注实测值；由 design-system.html 实时复核。
 * ========================================================================= */

/* ---------------------------------------------------------------- 1. 原始色阶 */
:root {
  /* ── 深空 Sky：不是"企业海军蓝"，而是接近夜空的蓝黑。
        竞品普遍用 #0A1F44 那一档"银行蓝"，显廉价；这里压到近乎黑，金色才能立住。 */
  --sky-1000: #03070D;
  --sky-950:  #050B14;   /* 页面底 */
  --sky-900:  #08111C;
  --sky-880:  #0A1521;
  --sky-850:  #0C1725;   /* 卡片 */
  --sky-800:  #12202F;   /* 悬浮 */
  --sky-750:  #16283A;
  --sky-700:  #1B2C3F;   /* 强边框 */
  --sky-600:  #2A3E54;
  --sky-500:  #3D5470;

  /* ── 金 Gold：品牌主色 = "人的信任"。
        刻意避开 #FFD700 那种亮黄（廉价），用偏铜的暖金 —— 真金的颜色是暗的。 */
  --gold-050: #FEFAF0;
  --gold-100: #FBF3DA;
  --gold-200: #F3E3B0;
  --gold-300: #E8CE86;   /* 暗底上的金色文字（12.4:1） */
  --gold-400: #DCB55C;   /* 暗底上的强调 / 焦点环（9.4:1） */
  --gold-500: #C9A227;   /* 核心金 */
  --gold-600: #A8842A;   /* 亮底描边/装饰（对白 3.5:1，⛔ 只做线条不做正文） */
  --gold-650: #8B6B14;   /* ★ 亮底上的金**填充**（配白字 5.0:1 ✅ AA）——
                            金在亮底做填充永远过不了对比度，必须压深；见 BRAND.md §2.3 */
  --gold-700: #7A5E14;   /* 亮底上的金色**文字**（对白 6.1:1 ✅ AA） */
  --gold-800: #4E3B0C;
  /* ── 青 Teal：状态色 = "机器的确定性 / 送达"。
        这是与竞品最本质的差别：他们只有一种颜色，本品牌有两种且语义不重叠。 */
  --teal-100: #D8F7EC;
  --teal-200: #A7F3DE;
  --teal-300: #6EE7C6;
  --teal-400: #35D6A8;   /* 暗底送达态（10.3:1） */
  --teal-500: #14B98A;
  --teal-600: #0B8F6B;
  --teal-700: #0B7A5A;   /* 亮底送达态（对白 5.3:1 ✅ AA） */

  /* ── 琥珀 Amber：到期 / 待办 / 需要人插手 */
  --amber-100: #FEF3DC;
  --amber-300: #FBD48A;
  --amber-400: #F0B44D;
  --amber-500: #D9901F;
  --amber-600: #A66A0B;
  --amber-650: #925F0A;  /* ★ 亮底琥珀**文字**（对白 5.5:1 ✅ AA）——
                            原 amber-600 实测只有 4.48:1，差 0.02 就是不达标 */
  --amber-700: #7A4E06;

  /* ── 红 Red：退信 / 失败 / 不可逆操作 */
  --red-100: #FDECEB;
  --red-300: #FCA5A0;
  --red-400: #F87171;
  --red-500: #E5484D;
  --red-600: #C0292F;
  --red-700: #8E1A20;    /* 亮底上的红字（对白 7.4:1 ✅ AAA） */

  /* ── 墨 Ink：亮色模式的中性色，偏暖（纸感），避免冷灰的廉价感 */
  --ink-950: #060C14;
  --ink-900: #0A1420;
  --ink-800: #14202E;
  --ink-700: #22303F;
  --ink-600: #3A4857;
  --ink-500: #4A5866;    /* 亮底次要文字（对暖白 6.9:1 ✅ AA） */
  --ink-450: #5C6A78;    /* ★ 亮底三级文字（对白 5.5:1 ✅ AA）——
                            原 ink-400 实测 4.27:1 不达标，被真浏览器核验抓出 */
  --ink-400: #6E7C8A;
  --ink-300: #98A4B1;
  --ink-200: #C7CFD8;
  --ink-150: #DDE3E9;
  --ink-100: #EBEEF2;
  --ink-050: #F5F6F8;
  --paper:   #FAF9F6;    /* 暖白纸 —— 纯白 #FFF 在长时间阅读下偏刺眼 */
  --paper-2: #F3F1EC;
}

/* ---------------------------------------------------------------- 2. 语义令牌 · 暗色（产品主线） */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* 表面：暗色下**不用阴影表达层级**（阴影在深底上几乎不可见），
     改用"表面提亮 + 发丝边"—— 这是暗色 UI 最容易做错的地方。 */
  --bg-base:      var(--sky-950);
  --bg-surface:   var(--sky-900);
  --bg-raised:    var(--sky-850);
  --bg-overlay:   var(--sky-800);
  --bg-inset:     var(--sky-1000);
  --bg-hover:     rgb(255 255 255 / 0.045);
  --bg-active:    rgb(255 255 255 / 0.080);
  --bg-selected:  rgb(201 162 39 / 0.10);

  /* 边框三级，用途严格区分（见 BRAND.md §2.4）：
       subtle = 装饰性发丝（表行分隔、卡片内分隔）—— WCAG 不要求对比度
       border = 常规容器边界（卡片、面板）        —— 视觉分组即可
       strong = **组件边界**（输入框/复选框/开关）—— 必须 ≥3:1 */
  --border-subtle: rgb(255 255 255 / 0.07);
  --border:        rgb(255 255 255 / 0.14);
  --border-strong: rgb(255 255 255 / 0.40);
  --border-brand:  rgb(201 162 39 / 0.42);

  --text-primary:   #E6EBF2;   /* 15.7:1 —— 锚在 7~18:1，⛔ 不用纯白（会光晕） */
  --text-secondary: #9AA8BA;   /*  7.8:1 */
  --text-tertiary:  #7A8899;   /*  5.2:1，仅 ≥12px 次要信息 */
  --text-on-brand:  #08111C;
  --text-on-ok:     #04140E;   /* 暗底绿底用深字（10:1） */
  --text-on-danger: #3A0508;   /* 暗底红底用深字（4.6:1） */
  --text-link:      var(--gold-300);

  --brand:        var(--gold-500);
  --brand-hover:  var(--gold-400);
  --brand-active: var(--gold-600);
  --brand-text:   var(--gold-300);
  --brand-subtle: rgb(201 162 39 / 0.12);

  --ok:        var(--teal-400);
  --ok-text:   var(--teal-300);
  --ok-bg:     rgb(20 185 138 / 0.13);
  --ok-border: rgb(20 185 138 / 0.34);

  --warn:        var(--amber-400);
  --warn-text:   var(--amber-300);
  --warn-bg:     rgb(217 144 31 / 0.14);
  --warn-border: rgb(217 144 31 / 0.36);

  --danger:        var(--red-400);
  --danger-text:   var(--red-300);
  --danger-bg:     rgb(229 72 77 / 0.14);
  --danger-border: rgb(229 72 77 / 0.38);

  /* 信息 = 青。⛔ 刻意不引入第二个蓝 —— 那会立刻变成"通用 SaaS 配色" */
  --info:        var(--teal-400);
  --info-text:   var(--teal-300);
  --info-bg:     rgb(20 185 138 / 0.10);
  --info-border: rgb(20 185 138 / 0.28);

  --ring:       var(--gold-400);
  --ring-width: 2px;
  --ring-offset: 2px;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .34);
  --shadow-2: 0 2px 8px rgb(0 0 0 / .40);
  --shadow-3: 0 12px 32px rgb(0 0 0 / .50);
  --shadow-4: 0 28px 64px rgb(0 0 0 / .58);
  --shadow-brand: 0 0 0 1px rgb(201 162 39 / .26), 0 8px 24px rgb(201 162 39 / .12);
}

/* ---------------------------------------------------------------- 3. 亮色主题 */
[data-theme="light"] {
  color-scheme: light;

  --bg-base:    var(--paper);
  --bg-surface: #FFFFFF;
  --bg-raised:  #FFFFFF;
  --bg-overlay: var(--paper-2);
  --bg-inset:   var(--ink-050);
  --bg-hover:   rgb(10 20 32 / 0.035);
  --bg-active:  rgb(10 20 32 / 0.065);
  --bg-selected: rgb(168 132 42 / 0.10);

  --border-subtle: rgb(10 20 32 / 0.07);
  --border:        rgb(10 20 32 / 0.15);
  --border-strong: rgb(10 20 32 / 0.46);
  --border-brand:  rgb(168 132 42 / 0.45);

  --text-primary:   var(--ink-900);   /* 17.6:1 */
  --text-secondary: var(--ink-500);   /*  6.9:1 */
  --text-tertiary:  var(--ink-450);   /*  5.5:1 */
  --text-on-brand:  #FFFFFF;
  --text-on-ok:     #FFFFFF;   /* 亮底绿底已足够深，用白字（4.1:1） */
  --text-on-danger: #FFFFFF;
  --text-link:      var(--gold-700);

  --brand:        var(--gold-650);   /* 亮底填充（配白字 5.0:1） */
  --brand-hover:  var(--gold-700);
  --brand-active: var(--gold-800);
  --brand-text:   var(--gold-700);   /* 亮底金字（对暖白 6.1:1） */
  --brand-subtle: rgb(168 132 42 / 0.10);

  --ok:        var(--teal-600);
  --ok-text:   var(--teal-700);
  --ok-bg:     rgb(11 143 107 / 0.09);
  --ok-border: rgb(11 143 107 / 0.28);

  --warn:        var(--amber-600);   /* 亮底指示点/边框：amber-500 实测仅 2.64:1 不达标 */
  --warn-text:   var(--amber-650);   /* 5.5:1 */
  --warn-bg:     rgb(217 144 31 / 0.10);
  --warn-border: rgb(217 144 31 / 0.30);

  --danger:        var(--red-600);
  --danger-text:   var(--red-700);
  --danger-bg:     rgb(192 41 47 / 0.08);
  --danger-border: rgb(192 41 47 / 0.26);

  --info:        var(--teal-600);
  --info-text:   var(--teal-700);
  --info-bg:     rgb(11 143 107 / 0.07);
  --info-border: rgb(11 143 107 / 0.22);

  --ring:       var(--gold-600);
  --ring-width: 2px;
  --ring-offset: 2px;

  --shadow-1: 0 1px 2px rgb(6 12 20 / .06);
  --shadow-2: 0 2px 6px rgb(6 12 20 / .07), 0 1px 2px rgb(6 12 20 / .05);
  --shadow-3: 0 10px 28px rgb(6 12 20 / .10), 0 2px 6px rgb(6 12 20 / .06);
  --shadow-4: 0 24px 56px rgb(6 12 20 / .14), 0 6px 16px rgb(6 12 20 / .08);
  --shadow-brand: 0 0 0 1px rgb(168 132 42 / .22), 0 8px 20px rgb(168 132 42 / .10);
}

/* ---------------------------------------------------------------- 4. 字体 */
:root {
  /* 字体策略：**全系统只用一族无衬线 + 一族等宽**。
     刻意不引入衬线标题 —— 衬线传达"传承"，而本品牌的承诺是"速度"（30 天上线）。
     语气靠颜色、留白、数据层（等宽）建立，不靠字体混搭。 */
  --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Source Han Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
               Menlo, Consolas, "Liberation Mono", monospace;
  --font-numeric: var(--font-mono);

  /* 字号阶（11 → 60）。console 用 --fs-sm(12.5) 做表格底，文档用 --fs-md(14) */
  --fs-2xs:  11px;
  --fs-xs:   12px;
  --fs-sm:   12.5px;
  --fs-base: 13.5px;
  --fs-md:   14.5px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;
  --fs-4xl:  34px;
  --fs-5xl:  44px;
  --fs-6xl:  58px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --lh-tight:   1.18;   /* 大标题 */
  --lh-snug:    1.34;
  --lh-normal:  1.55;   /* 界面正文 */
  --lh-relaxed: 1.75;   /* 中文长文 */
  --lh-loose:   1.9;

  --ls-tight:  -0.022em;  /* 大字号收紧，否则西文松散 */
  --ls-snug:   -0.011em;
  --ls-normal: 0;
  --ls-wide:   0.018em;
  --ls-label:  0.085em;   /* 小号大写标签：仪表盘通用语，竞品都没做 */
}

/* ---------------------------------------------------------------- 5. 间距 / 圆角 / 动效 / 层级 */
:root {
  /* 4px 基准。8px 为节奏单位：绝大多数间距是 8 的倍数。 */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* 圆角刻意偏小（5~14）—— 大圆角是"消费级 App"语言；
     精密仪器、金融后台的语言是紧圆角。 */
  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   7px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-2xl:  20px;
  --r-full: 999px;

  /* 动效：快、无回弹。金融工具不该"弹" —— 回弹暗示不精确。 */
  --dur-instant: 80ms;
  --dur-fast:    130ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --dur-slower:  520ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-enter:    cubic-bezier(0, .6, .3, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-popover: 400;
  --z-toast: 500;

  --w-sidebar: 236px;
  --w-sidebar-collapsed: 60px;
  --h-topbar: 56px;
  --w-content-max: 1200px;
  --w-prose-max: 68ch;
}

/* ---------------------------------------------------------------- 6. 无障碍：减少动效 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    1ms;
    --dur-slow:    1ms;
    --dur-slower:  1ms;
  }
}