/**
 * StarSaltTheme 设计令牌（批 9-K1 全量替换版）
 *
 * 唯一权威来源：前端demo/vue-app/src/styles/main.css 的 :root 段。
 * 本文件只放令牌，不放任何选择器皮肤（皮肤在 theme-ui.css / *-ss.css）。
 *
 * 三条硬规则：
 *   1) 不允许出现第三套配色值。历史遗留的 #2b5cff（方案估值）与 #1A56DB（旧实现）
 *      均已作废，统一 #2563eb。改色只改这里，或改 theme/{配色}/index.css。
 *   2) 旧变量 --ss-* 全部保留，一律写成新令牌的别名。后台「会员中心配色」靠
 *      theme/{配色}/index.css 里的 --color-* / --ss-primary* 覆盖生效，
 *      删掉 --ss-* 就等于关掉换色能力。
 *   3) --brand-blue 跟随 --color-primary：默认配色即 demo 的 #2563eb（见
 *      theme/default/index.css），后台换配色时令牌层跟着变，不需要第二处维护。
 */

/* demo base/console.css:5-11 的 DINPro：金额、统计数值专用数字字体 */
@font-face {
  font-family: 'DINPro';
  src: url('../fonts/DINPro Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== 品牌色 =====
     --brand-blue 用 var(--color-primary) 而非死值：theme/{配色}/index.css 用的是
     `:root[theme='x']`，优先级高于本文件的 `:root`，换色自动覆盖；
     颜色 css 未加载时退回 demo 主色，不留未定义变量。 */
  --brand-blue: var(--color-primary, #2563eb);
  --brand-blue-dark: var(--ss-primary-hover, #1d4ed8);
  --brand-blue-light: #60a5fa;
  --brand-blue-pale: #93b4f5;
  --brand-cyan: #00e5ff;

  /* 主色透明度阶梯。换非默认配色时这 6 个值仍偏蓝，这是已知取舍：
     派生色需要构建期算（build/build-tokens.mjs 只写 5 个 --ss-primary*），
     运行期算只能靠 color-mix()，而 color-mix 在项目目标浏览器上不可靠。 */
  --brand-blue-tint-06: rgba(37, 99, 235, .06);
  --brand-blue-tint-07: rgba(37, 99, 235, .07);
  --brand-blue-tint-08: rgba(37, 99, 235, .08);
  --brand-blue-tint-10: rgba(37, 99, 235, .1);
  --brand-blue-tint-12: rgba(37, 99, 235, .12);
  --brand-blue-tint-15: rgba(37, 99, 235, .15);
  --brand-blue-tint-18: rgba(37, 99, 235, .18);
  --brand-blue-tint-20: rgba(37, 99, 235, .2);
  --brand-blue-tint-24: rgba(37, 99, 235, .24);
  --brand-blue-tint-30: rgba(37, 99, 235, .3);
  --brand-blue-tint-40: rgba(37, 99, 235, .4);

  /* ===== 语义色 ===== */
  --success: #22c55e;
  --success-strong: #00c261;
  --success-deep: #00a40c;
  --danger: #dc2626;
  /* hover 加深档：与 --warning-dark / --success-deep 对齐，避免各处自己写死深红 */
  --danger-dark: #b91c1c;
  --danger-bright: #e11d48;
  --danger-vivid: #ff4d4f;
  --danger-light: #f87171;
  --warning: #f59e0b;
  --warning-dark: #d97706;
  --warning-light: #fbbf24;
  --orange: #ff9d00;
  --violet: #7c3aed;
  --violet-light: #a78bfa;
  --purple-deep: #a855f7;
  --sky: #0ea5e9;
  --rose: #ef4444;
  --emerald: #10b981;
  --indigo-soft: #6366f1;
  --toast-bg: #27cc94;

  /* ===== 灰度 ===== */
  --gray-3: #d2d6dc;
  --gray-4: #aeb4bd;
  --gray-5: #6b7280;
  --gray-6: #9ca3af;

  /* ===== 间距（token 名 = 像素值） ===== */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;

  /* ===== 字号 ===== */
  --fs-9: 9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-50: 50px;
  --fs-58: 58px;
  --fs-60: 60px;
  --fs-80: 80px;

  /* ===== 行高 ===== */
  --lh-solid: 1;
  --lh-compact: 1.1;
  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-default: 1.4;
  --lh-base: 1.5;
  --lh-copy: 1.6;
  --lh-copy-lg: 1.7;
  --lh-loose: 1.8;
  --lh-loose-xl: 1.9;

  /* ===== 阴影 ===== */
  --shadow-focus: 0 0 0 3px var(--brand-blue-tint-08);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, .2);
  --shadow-toast: 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, .12);
  --shadow-dropdown: 0 4px 24px rgba(0, 0, 0, .12);
  /* 卡片的「协调」不靠给卡片染色（仍是近白），靠给光影染色：
     投影用主色而不是中性黑，卡片就和淡蓝侧栏处在同一束光下。 */
  --shadow-card: 0 1px 2px rgba(37, 99, 235, .06), 0 4px 14px rgba(37, 99, 235, .05);

  /* ===== 动效 ===== */
  --motion-100: .1s;
  --motion-120: .12s;
  --motion-140: .14s;
  --motion-fast: .15s;
  --motion-mid: .18s;
  --motion-base: .2s;
  --motion-250: .25s;
  --motion-slow: .3s;

  /* ===== 表面与文本 ===== */
  /* 页面底色：随侧栏一起落到 220° 色相族。
     侧栏 L94 / 页面 L97 / 卡片 L99.6 —— 靠明度分三层，不靠色相突变。 */
  --bg-color: #f2f6fd;
  --surface: #fdfeff;
  --surface-muted: #f7fafe;
  --text-main: #1a1a1a;
  --text-2: #555;
  --text-3: #666;
  --text-4: #888;
  --text-5: #999;
  --nav-bg: #f4f5f7;
  /* 侧栏/品牌区底色：淡蓝而不是纯白。
     用不透明实色而非 rgba 叠加——侧栏是 fixed，下面透出的是 body 底色，
     半透明在不同滚动位置会偏灰，颜色不可控。 */
  --nav-aside-bg: #e4ecfc;
  --card-border: #dde6f7;
  --divider: #edf1fa;
  --border: #e5e6eb;
  --border-strong: #c9cdd4;
  --accent-tint: #f7f8fa;
  --accent-soft: rgba(37, 99, 235, .06);

  /* ===== 按钮 / 渐变 / 字体 ===== */
  --btn-bg: #1a1a1a;
  --btn-text: #ffffff;
  --btn-hover-bg: #000000;
  --gradient-hero: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%);
  --font-main: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  --font-numbers: 'DINPro', 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  /* 等宽：demo base/style.css 的 --font-mono（实际是中文字体栈，非英文等宽） */
  --font-mono: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;

  /* ============================================================
     兼容别名层：--ss-* 全部指向新令牌
     保留原因见文件头第 2 条。新代码请直接用左列（--brand-blue 等）。
     ============================================================ */

  /* 主色 5 件套。注意 --ss-primary-hover / -active / -light / -gradient 不在此别名，
     它们由 theme/{配色}/index.css 的自动生成区写入，本文件再写一遍会形成
     「--brand-blue-dark → --ss-primary-hover → --brand-blue-dark」的循环引用。 */
  --ss-primary: var(--brand-blue);

  /* 功能色 */
  --ss-success: var(--success);
  --ss-success-light: rgba(34, 197, 94, .08);
  --ss-warning: var(--warning);
  --ss-warning-light: rgba(245, 158, 11, .08);
  --ss-danger: var(--danger);
  --ss-danger-light: rgba(220, 38, 38, .06);
  --ss-info: var(--sky);
  --ss-info-light: rgba(14, 165, 233, .08);

  /* 中性色 */
  --ss-text-1: var(--text-main);
  --ss-text-2: var(--text-2);
  --ss-text-3: var(--text-5);          /* 占位/禁用：对齐 demo 的 --text-5 */
  --ss-border: var(--border);
  --ss-border-light: var(--divider);
  --ss-bg-1: var(--bg-color);
  --ss-bg-2: var(--surface);
  --ss-bg-3: var(--bg-color);
  --ss-mask: rgba(0, 0, 0, .5);

  /* 旧代码遗留的第三套命名（旧版组件 CSS 直接抄了 Element 变量名）：
     原先没有定义，var() 取不到值 → 颜色失效（文字透明/边框消失）。
     这里补成新令牌的别名，不新增视觉决策。 */
  --text-primary: var(--text-main);
  --text-tertiary: var(--text-5);
  --border-color-light: var(--divider);

  /* 描边 / 底色（theme-ui 旧私有变量，收归令牌层，避免两处定义打架） */
  --ss-hairline: var(--card-border);
  --ss-hairline-strong: var(--border-strong);
  --ss-soft-bg: var(--surface-muted);

  /* 圆角 */
  --ss-radius-sm: 4px;
  --ss-radius: 8px;
  --ss-radius-lg: 12px;
  --ss-radius-round: 999px;
  --ss-radius-card: 14px;
  --ss-radius-btn: 8px;

  /* 阴影 */
  --ss-shadow-1: var(--shadow-card);
  --ss-shadow-2: var(--shadow-dropdown);
  --ss-shadow-3: var(--shadow-modal);

  /* 间距 */
  --ss-space-1: var(--space-4);
  --ss-space-2: var(--space-8);
  --ss-space-3: var(--space-12);
  --ss-space-4: var(--space-16);
  --ss-space-5: var(--space-24);
  --ss-space-6: var(--space-32);
  --ss-space-7: var(--space-48);

  /* 字号 */
  --ss-font-xs: var(--fs-12);
  --ss-font-sm: var(--fs-13);
  --ss-font-base: var(--fs-14);
  --ss-font-md: var(--fs-15);
  --ss-font-lg: var(--fs-16);
  --ss-font-xl: var(--fs-20);
  --ss-font-2xl: var(--fs-24);

  /* 布局。批 9-K2 定稿值：侧栏 200 / 顶栏 56，与 demo 一致；
     旧值 220 / 60 作废（它只被部分页面 CSS 引用，从未真正生效）。 */
  --ss-sidebar-width: 200px;
  --ss-header-height: 56px;
  --ss-content-max: 1440px;
  --ss-aside-w: var(--ss-sidebar-width);
  --ss-header-h: var(--ss-header-height);

  /* 动效 */
  --ss-motion: var(--motion-mid) ease;
}

/* ===== 滚动条（结构工具类，无颜色语义） ===== */
.ss-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.ss-scrollbar::-webkit-scrollbar-thumb { background: var(--gray-3); border-radius: 3px; }
.ss-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--gray-4); }
.ss-scrollbar::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   暗色令牌（[data-theme="dark"]）
   来源：demo base/style.css:128-172 + base/console.css:26-37。
   demo 的 console.html 先加载 style.css 再加载 console.css，
   两文件重叠的键以 console.css 为准（--bg-color / --surface /
   --nav-bg / --shadow-card），下面已按 demo 最终生效值书写。

   只覆盖「有明暗语义」的表面/文本/边框/背景/按钮/阴影/渐变令牌；
   品牌色 --brand-blue、语义色（success、danger 等）、灰度、间距、字号、
   行高在 demo 里明暗同值，不重复定义。
   --ss-* 别名层是 var() 引用，源头令牌一变即自动跟随，无需二次覆盖。
   特异性：`:root`(0,1,0) 与本块(0,1,0) 相同，本块在文件更后 → 暗色胜出；
   配色文件 `:root[theme='x']`(0,2,0) 更高，但它只写品牌色与 --ss-primary
   前缀的令牌，不碰这些表面令牌，换配色与暗色互不干扰。
   ============================================================ */
[data-theme="dark"] {
  --bg-color: #0c0d14;
  --surface: #161825;
  --surface-muted: #14141f;

  --text-main: #e8e8f0;
  --text-2: #b8b8c8;
  --text-3: #a8a8b8;
  --text-4: #888896;
  --text-5: #787888;

  --nav-bg: rgba(12, 13, 20, .88);
  --nav-aside-bg: #1a2138;
  --card-border: rgba(255, 255, 255, .06);
  --divider: rgba(255, 255, 255, .06);
  --border: rgba(255, 255, 255, .1);
  --border-strong: rgba(255, 255, 255, .22);

  --accent-tint: rgba(255, 255, 255, .04);
  --accent-soft: rgba(37, 99, 235, .08);

  --btn-bg: #e8e8f0;
  --btn-text: #0a0a12;
  --btn-hover-bg: #ffffff;

  --gradient-hero: linear-gradient(135deg, #d97706 0%, #be185d 50%, #6d28d9 100%);

  /* demo console.css:31 覆盖 style.css 的卡片阴影：暗底加深 */
  --shadow-card: none;
}

/* ===== View Transition 主题切换机制（demo console.css:39-52）=====
   顶栏主题按钮用 document.startViewTransition 做圆形扩散揭示：
   默认 UA 过渡会做交叉淡出，这里关掉动画与混合，改由 JS 的
   WAAPI 给 ::view-transition-new(root) 挂 clip-path 圆形扩散。
   .theme-switching 在动画期间禁掉全站 transition，避免
   「旧快照 + 各元素自身过渡」叠加出闪烁。 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}