/* ============================================================================
 * qqhotmail.com · Design Tokens — Phase 1B（对应 01-visual-spec.md §1 / §2 / §4 / §5）
 *
 * 用法：<html data-palette="A|B|C" data-role="admin|sales|me">
 *       B 另加 data-theme="dark"；B 的 /me 正文容器另加 data-surface="read"。
 *       三套 Key 集合一字不差、只换 Value；三端只在端作用域覆写 §4.4 白名单 Key。
 *       九个预览页共用同一份结构 DOM，切换属性即可换肤，模板一行不改。
 *
 * --- Element Plus 2.x 变量映射入口（§4.5；在 ep-A/B/C.css 中实现，本文件不覆写 EP）---
 *   --el-color-primary / primary-light-{3,5,7,8,9} / primary-dark-2
 *       -> --brand / --brand-soft / --brand-softer / --brand-muted / --brand-hover / --brand-active
 *   --el-color-success|warning|danger|info（及各自 light 系列）
 *       -> --success|warning|danger|info（及 *-soft）
 *   --el-border-radius-base / small / round / circle
 *       -> --r-md / --r-sm / --r-lg / 50%（仅徽章·头像·状态点）
 *   --el-border-color / -light / -lighter / -extra-light
 *       -> --border / --border-strong / --surface-2 / --surface-3
 *   --el-box-shadow / -light / -lighter              -> --shadow-2 / --shadow-1 / --shadow-0
 *   --el-font-size-base / small / large              -> --fs-body / --fs-caption / --fs-h3
 *   --el-text-color-primary / regular / secondary / placeholder / disabled
 *       -> --text-1 / --text-2 / --text-3 / --text-3 / --text-disabled
 *   --el-fill-color-blank / -light / -lighter        -> --surface-1 / --surface-3 / --surface-2
 *   --el-bg-color / -page / -overlay                 -> --surface-2 / --bg-app / --bg-app
 *   --el-font-family                                -> --font-sans + --font-cn 组合栈
 *   A 额外：EP 默认 box-shadow 系列清零改 border；
 *   B 额外：表格斑马纹 / 抽屉 / 日期面板 / Popper / Message + ECharts 深色轴·网格·tooltip；
 *   C 额外：--el-border-radius-* 全档提升、表格行高改到 §5 值。
 *
 * --- 结构常量归属声明 ---
 *   栅格列数 / gutter / 侧栏·主栏·第三栏宽度 / 弹窗宽度 / 区块顺序 /
 *   导航层级 / 字段集合 / 响应式断点，全部归 ux-design 的 STRUCT.* 单一来源。
 *   本文件不含任何布局列宽、gutter、区块顺序数值；三套 A/B/C 与三端 admin/sales/me
 *   共用同一份结构常量，任何调性 Token 不得覆写（详见文末 §5 注释）。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * §1.4 / §4.3 跨套恒定 Token —— 三套 Value 相同，不参与换肤
 * ------------------------------------------------------------------------- */
:root {
  /* 间距步长（4px 基数） */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;

  /* z-index 层级 */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-popover: 1100;
  --z-modal: 2000;
  --z-toast: 3000;
  --z-tooltip: 3100;

  /* 图标尺寸档 */
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;

  /* 边框宽度 */
  --bw: 1px;
}

/* ---------------------------------------------------------------------------
 * §2 三套 Value 集 —— Key 集合完全一致（同序、同名），只换 Value
 * 各套「密度与高度」段为 /admin 基准值（§5 零让步 = §2 / §3 原生值）。
 * ------------------------------------------------------------------------- */

/* ===== A 钢青台账 / STEEL LEDGER ===== */
:root[data-palette="A"] {
  /* 品牌色全阶 */
  --brand: #2F6F8B;
  --brand-hover: #1E5068;
  --brand-active: #14384A;
  --brand-soft: #E6F0F4;
  --brand-softer: #F2F7F9;
  --brand-muted: #5C94AB;
  --brand-on: #FFFFFF;
  --accent: #C1662F;
  --accent-soft: #F7EAE0;
  --accent-on: #FFFFFF;
  --highlight: #B9913C;

  /* 中性色全阶 */
  --bg-app: #F4F6F8;
  --surface-1: #FFFFFF;
  --surface-2: #FAFBFC;
  --surface-3: #F0F3F6;
  --border: #DDE3E9;
  --border-strong: #C4CDD6;
  --text-1: #1B2733;
  --text-2: #5A6875;
  --text-3: #8A97A3;
  --text-disabled: #B4BEC7;

  /* 语义色（实心 / soft / on） */
  --success: #2E8B6B;
  --success-soft: #E8F4EF;
  --success-on: #FFFFFF;
  --warning: #C08A2E;
  --warning-soft: #FBF3E4;
  --warning-on: #1B2733;
  --danger: #C0453B;
  --danger-soft: #FBECEA;
  --danger-on: #FFFFFF;
  --info: #4A7FA5;
  --info-soft: #EAF1F6;
  --info-on: #FFFFFF;

  /* 图表 6 色（定序） */
  --chart-1: #2F6F8B;
  --chart-2: #C1662F;
  --chart-3: #4E8C6A;
  --chart-4: #7A6BA8;
  --chart-5: #B9913C;
  --chart-6: #4A7A99;

  /* 字族 */
  --font-sans: Inter, system-ui, sans-serif;
  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: Inter, system-ui, sans-serif;

  /* 字阶：px / 行高 / 字重 */
  --fs-display: 32px;
  --lh-display: 40px;
  --fw-display: 600;
  --fs-h1: 24px;
  --lh-h1: 32px;
  --fw-h1: 600;
  --fs-h2: 18px;
  --lh-h2: 26px;
  --fw-h2: 600;
  --fs-h3: 15px;
  --lh-h3: 22px;
  --fw-h3: 600;
  --fs-body: 13px;
  --lh-body: 20px;
  --fw-body: 400;
  --fs-caption: 12px;
  --lh-caption: 18px;
  --fw-caption: 400;
  --fs-micro: 11px;
  --lh-micro: 16px;
  --fw-micro: 500;

  /* 圆角档位 */
  --r-none: 0px;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 6px;
  --r-max: 8px;
  /* --card-r：§3.5 / §5「卡片圆角」的具名 Key，是 §4.4 白名单 --r-md / --r-lg
     在卡片组件上的落点；取值全部来自 §3.5 / §5，未引入任何新数值。 */
  --card-r: 4px;

  /* 边框 */
  --bw-strong: 2px;
  --border-focus: #2F6F8B;

  /* 阴影层级 */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(27,39,51,.06);
  --shadow-2: 0 8px 24px rgba(27,39,51,.12);
  --shadow-3: 0 16px 40px rgba(27,39,51,.16);

  /* 焦点环 */
  --focus-ring: 0 0 0 2px #2F6F8B;
  --focus-border: #2F6F8B;

  /* 图标规格 */
  --icon-stroke: 1.5px;
  --icon-cap: butt;
  --icon-join: miter;
  --icon-glow: none;

  /* 密度与高度（/admin 基准） */
  --row-h: 36px;
  --card-pad: 16px;
  --btn-h: 32px;
  --input-h: 32px;
  --tab-h: 36px;
  --nav-item-h: 36px;
}

/* ===== B 午夜仪表 / MIDNIGHT OPS ===== */
:root[data-palette="B"] {
  /* 品牌色全阶 */
  --brand: #3FC8D8;
  --brand-hover: #8FE2EC;
  --brand-active: #2AA6B5;
  --brand-soft: #12343C;
  --brand-softer: #0E2A31;
  --brand-muted: #1B6B77;
  --brand-on: #0B1119;
  --accent: #9B8AFB;
  --accent-soft: #241F3D;
  --accent-on: #0B1119;
  --highlight: #F5B544;

  /* 中性色全阶 */
  --bg-app: #0B1119;
  --surface-1: #111A24;
  --surface-2: #18232F;
  --surface-3: #1F2D3B;
  --border: #263646;
  --border-strong: #35485C;
  --text-1: #E8F0F7;
  --text-2: #9FB0C0;
  --text-3: #6B7E90;
  --text-disabled: #47596B;

  /* 语义色（实心 / 沉底 soft / on；深色端提亮，on 全用深墨） */
  --success: #3FCF8E;
  --success-soft: #102A22;
  --success-on: #0B1119;
  --warning: #F5B544;
  --warning-soft: #2E2410;
  --warning-on: #0B1119;
  --danger: #FF6B6B;
  --danger-soft: #301C1C;
  --danger-on: #0B1119;
  --info: #57A9F5;
  --info-soft: #12233A;
  --info-on: #0B1119;

  /* 图表 6 色（定序） */
  --chart-1: #3FC8D8;
  --chart-2: #9B8AFB;
  --chart-3: #F5B544;
  --chart-4: #3FCF8E;
  --chart-5: #FF7B9C;
  --chart-6: #57A9F5;

  /* 字族 */
  --font-sans: Inter, system-ui, sans-serif;
  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: Inter, system-ui, sans-serif;

  /* 字阶：px / 行高 / 字重（KPI 字重禁 >=700） */
  --fs-display: 36px;
  --lh-display: 42px;
  --fw-display: 500;
  --fs-h1: 22px;
  --lh-h1: 30px;
  --fw-h1: 600;
  --fs-h2: 16px;
  --lh-h2: 24px;
  --fw-h2: 600;
  --fs-h3: 14px;
  --lh-h3: 20px;
  --fw-h3: 500;
  --fs-body: 13px;
  --lh-body: 22px;
  --fw-body: 400;
  --fs-caption: 12px;
  --lh-caption: 18px;
  --fw-caption: 400;
  --fs-micro: 11px;
  --lh-micro: 16px;
  --fw-micro: 500;

  /* 圆角档位 */
  --r-none: 0px;
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-max: 14px;
  /* --card-r：§3.5 / §5「卡片圆角」的具名 Key（说明见 A 块） */
  --card-r: 10px;

  /* 边框 */
  --bw-strong: 2px;
  --border-focus: #3FC8D8;

  /* 阴影层级（靠表面亮度阶梯 + 顶部内高光，不靠外阴影） */
  --shadow-0: none;
  --shadow-1: inset 0 1px 0 rgba(255,255,255,.03);
  --shadow-2: 0 4px 16px rgba(0,0,0,.4);
  --shadow-3: 0 12px 32px rgba(0,0,0,.5);

  /* 焦点环 */
  --focus-ring: 0 0 0 2px rgba(63,200,216,.18);
  --focus-border: #3FC8D8;

  /* 图标规格（光晕仅激活态图标 / 未读点 / 逾期点，禁止文字发光） */
  --icon-stroke: 1.5px;
  --icon-cap: butt;
  --icon-join: miter;
  --icon-glow: 0 0 8px rgba(63,200,216,.35);

  /* 密度与高度（/admin 基准） */
  --row-h: 40px;
  --card-pad: 20px;
  --btn-h: 34px;
  --input-h: 34px;
  --tab-h: 40px;
  --nav-item-h: 40px;
}

/* ===== C 暖砂信笺 / WARM SAND MAIL ===== */
:root[data-palette="C"] {
  /* 品牌色全阶 */
  --brand: #B0552E;
  --brand-hover: #8C3F20;
  --brand-active: #632B14;
  --brand-soft: #F5E1D5;
  --brand-softer: #FBF1EB;
  --brand-muted: #D98A63;
  --brand-on: #FFFFFF;
  --accent: #3E6B55;
  --accent-soft: #E4EFE8;
  --accent-on: #FFFFFF;
  --highlight: #E8A33D;

  /* 中性色全阶（暖中性） */
  --bg-app: #F7F4EF;
  --surface-1: #FFFDFB;
  --surface-2: #F2EDE5;
  --surface-3: #EDE6DA;
  --border: #E6DED2;
  --border-strong: #D2C7B7;
  --text-1: #2B2621;
  --text-2: #6B6157;
  --text-3: #968B7E;
  --text-disabled: #C4BAAE;

  /* 语义色（实心 / soft / on） */
  --success: #4E8B6B;
  --success-soft: #E7F1EA;
  --success-on: #FFFFFF;
  --warning: #D19A3C;
  --warning-soft: #FAF0DF;
  --warning-on: #2B2621;
  --danger: #C25B4E;
  --danger-soft: #F9E9E6;
  --danger-on: #FFFFFF;
  --info: #5B7F9E;
  --info-soft: #E8EFF5;
  --info-on: #FFFFFF;

  /* 图表 6 色（定序） */
  --chart-1: #B0552E;
  --chart-2: #3E6B55;
  --chart-3: #D19A3C;
  --chart-4: #5B7F9E;
  --chart-5: #8A6A9B;
  --chart-6: #7E8B5C;

  /* 字族（--font-display 衬线，禁止进入表格 / KPI / 日志） */
  --font-sans: "DM Sans", Inter, system-ui, sans-serif;
  --font-cn: "Noto Sans SC", "PingFang SC", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", monospace;
  --font-display: "Noto Serif SC", serif;

  /* 字阶：px / 行高 / 字重 */
  --fs-display: 30px;
  --lh-display: 38px;
  --fw-display: 600;
  --fs-h1: 24px;
  --lh-h1: 34px;
  --fw-h1: 600;
  --fs-h2: 19px;
  --lh-h2: 28px;
  --fw-h2: 600;
  --fs-h3: 16px;
  --lh-h3: 24px;
  --fw-h3: 600;
  --fs-body: 15px;
  --lh-body: 26px;
  --fw-body: 400;
  --fs-caption: 13px;
  --lh-caption: 20px;
  --fw-caption: 400;
  --fs-micro: 12px;
  --lh-micro: 18px;
  --fw-micro: 500;

  /* 圆角档位 */
  --r-none: 0px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-max: 24px;
  /* --card-r：§3.5 / §5「卡片圆角」的具名 Key（说明见 A 块） */
  --card-r: 16px;

  /* 边框 */
  --bw-strong: 2px;
  --border-focus: #B0552E;

  /* 阴影层级（柔和、大扩散、低不透明、带暖色） */
  --shadow-0: none;
  --shadow-1: 0 2px 8px rgba(43,38,33,.05), 0 1px 2px rgba(43,38,33,.04);
  --shadow-2: 0 8px 28px rgba(43,38,33,.08);
  --shadow-3: 0 20px 48px rgba(43,38,33,.12);

  /* 焦点环 */
  --focus-ring: 0 0 0 3px #F5E1D5;
  --focus-border: #B0552E;

  /* 图标规格（1.75px 圆头单色；空状态插画允许双色） */
  --icon-stroke: 1.75px;
  --icon-cap: round;
  --icon-join: round;
  --icon-glow: none;

  /* 密度与高度（/admin 基准） */
  --row-h: 48px;
  --card-pad: 24px;
  --btn-h: 38px;
  --input-h: 38px;
  --tab-h: 44px;
  --nav-item-h: 44px;
}

/* ---------------------------------------------------------------------------
 * §4.4 / §5 三端 Scope 覆写（只覆写白名单 Key，数值严格按 §5 对照表）
 *
 * 实现说明：§5 是「A/B/C × 三端」矩阵，同一 data-role 下三套取值不同，因此
 * 实际声明使用组合选择器 :root[data-palette][data-role]（特异性 0,3,0，高于
 * palette 块 0,2,0），且置于 palette 块之后，保证覆写生效。
 * 三个 :root[data-role="..."] 语义入口保留如下（注释形式），供前端统一挂属性。
 * 白名单 Key：--row-h / --fs-body / --lh-body / --card-pad / --card-r /
 * --btn-h / --input-h / --tab-h / --nav-item-h。
 * --r-md / --r-lg 属 §4.4 白名单，但 §5 未给三端差异值，保持 palette 基准不动。
 * ------------------------------------------------------------------------- */

/* 3.1 /admin —— 零让步：不覆写任何白名单 Key，取各自 palette 基准
   （§5 /admin 列 = §2 / §3 原生值：A 36/13/20/16/4/32/32/36/36，
     B 40/13/22/20/10/34/34/40/40，C 48/15/26/24/16/38/38/44/44） */
:root[data-role="admin"] {
  /* 零让步：继承 :root[data-palette="A|B|C"] 密度段，无覆写。 */
}

/* 3.2 /sales —— 小幅让步 */
:root[data-role="sales"] {
  /* 语义入口；实际数值见下方三条组合选择器（按 §5 /sales 列）。 */
}

:root[data-palette="A"][data-role="sales"] {
  --row-h: 44px;
  --fs-body: 14px;
  --lh-body: 22px;
  --card-pad: 16px;
  --card-r: 6px;
  --btn-h: 34px;
  --input-h: 34px;
  --tab-h: 38px;
  --nav-item-h: 40px;
}

:root[data-palette="B"][data-role="sales"] {
  --row-h: 46px;
  --fs-body: 14px;
  --lh-body: 24px;
  --card-pad: 20px;
  --card-r: 10px;
  --btn-h: 36px;
  --input-h: 36px;
  --tab-h: 40px;
  --nav-item-h: 42px;
}

:root[data-palette="C"][data-role="sales"] {
  --row-h: 52px;
  --fs-body: 15px;
  --lh-body: 26px;
  --card-pad: 24px;
  --card-r: 16px;
  --btn-h: 40px;
  --input-h: 38px;
  --tab-h: 44px;
  --nav-item-h: 44px;
}

/* 3.3 /me —— 让步上限（卡片圆角不得超 --r-max；C 的 --lh-body 最多 28px） */
:root[data-role="me"] {
  /* 语义入口；实际数值见下方三条组合选择器（按 §5 /me 列）。 */
}

:root[data-palette="A"][data-role="me"] {
  --row-h: 56px;
  --fs-body: 15px;
  --lh-body: 24px;
  --card-pad: 20px;
  --card-r: 6px;
  --btn-h: 38px;
  --input-h: 38px;
  --tab-h: 40px;
  --nav-item-h: 44px;
}

:root[data-palette="B"][data-role="me"] {
  --row-h: 56px;
  --fs-body: 15px;
  --lh-body: 24px;
  --card-pad: 20px;
  --card-r: 14px;
  --btn-h: 40px;
  --input-h: 40px;
  --tab-h: 44px;
  --nav-item-h: 44px;
}

:root[data-palette="C"][data-role="me"] {
  --row-h: 60px;
  --fs-body: 16px;
  --lh-body: 28px;
  --card-pad: 24px;
  --card-r: 24px;
  --btn-h: 44px;
  --input-h: 44px;
  --tab-h: 48px;
  --nav-item-h: 48px;
}

/* 3.4 §5 定性行 —— 不新增变量，由组件层按下列约束实现：
 *   主色 / 强调色权重：
 *     /admin  A 灰度 90%+ ／ B 图表 6 色全开 ／ C 主色最低（仅主按钮·选中·告警）
 *     /sales  A 中 ／ B 青=邮件、紫=客户 ／ C 赤陶+墨绿语义对
 *     /me     A 中高 ／ B 阅读层翻转 ／ C 最高
 *   强调色总面积上限：A <5% ／ B <8%（双光源）／ C <5%，三端一致。
 *   阴影启用：/admin 与 /sales —— A 仅浮层、B 仅 popover、C --shadow-1；
 *             /me —— A 允许卡片 --shadow-1，B / C 同 /admin。
 *   层级构建哲学三端不变：A border-first ／ B 表面亮度阶梯 ／ C shadow-first。
 *   禁止：改变层级哲学、覆写 --brand 与语义色 HEX、/me 圆角超 --r-max、
 *         /admin 出现空状态插画 / 大圆角欢迎区 / 营销插画。
 */

/* ---------------------------------------------------------------------------
 * §4.5 / §2B  B 深色开关 data-theme="dark"
 * B 的 Token 本身即深色；此开关为显式皮肤声明，数值与 :root[data-palette="B"]
 * 完全一致，未新增任何色值。Phase 1B 未定义 B 的 light 皮肤；/me 的浅色
 * 仅由下方 data-surface="read" 阅读层提供（禁止局部深色块 / 浅底用提亮语义色）。
 * ------------------------------------------------------------------------- */
:root[data-palette="B"][data-theme="dark"] {
  --bg-app: #0B1119;
  --surface-1: #111A24;
  --surface-2: #18232F;
  --surface-3: #1F2D3B;
  --border: #263646;
  --border-strong: #35485C;
  --text-1: #E8F0F7;
  --text-2: #9FB0C0;
  --text-3: #6B7E90;
  --text-disabled: #47596B;
}

/* ---------------------------------------------------------------------------
 * §2B / §7.6  B 的 /me 阅读层 data-surface="read"（暗外壳 + 亮阅读窗）
 * 建议把 data-surface="read" 挂在正文容器（而非 <html>），顶栏 / 文件夹 /
 * 底部 Tab 保持深色 chrome。三个 --read-* Key 可挂在 <html> 或容器上。
 * ------------------------------------------------------------------------- */
:root[data-surface="read"],
[data-surface="read"] {
  --read-bg: #F4F7FA;
  --read-text: #1B2733;
  --read-border: #DDE3E9;
}

/* 正文容器内把表面 / 文字 / 边框切到纸面层（自定义属性在该元素上直接生效，
   覆盖从 :root 继承来的深色值；chrome 不受影响） */
[data-surface="read"] {
  --surface-1: var(--read-bg);
  --text-1: var(--read-text);
  --border: var(--read-border);
}

/* ---------------------------------------------------------------------------
 * §4.1 结构常量引用（单一来源：ux-design Phase 2）
 * 本文件不定义、不覆盖以下任何数值，仅声明引用关系：
 *   STRUCT.grid.cols              栅格列数
 *   STRUCT.grid.gutter            栅格 gutter / 卡片间距
 *   STRUCT.layout.sidebar         侧栏宽度
 *   STRUCT.layout.main            主栏宽度
 *   STRUCT.layout.rail            第三栏宽度（/sales 客户卡栏）
 *   STRUCT.modal.width            弹窗宽度
 *   STRUCT.section.order.admin / .sales / .me   首屏区块顺序
 *   STRUCT.nav.depth              导航层级
 *   STRUCT.fields.admin / .sales / .me          字段集合
 *   STRUCT.breakpoints            响应式断点
 * 三套 A/B/C 与三端 admin/sales/me 共用同一份结构常量；ux-design 调整常量时
 * 三套预览自动同步，无需改动本文件任何 Token。
 * ========================================================================== */