/* ============================================================
   咖莱云设计系统 · 设计令牌 tokens.css
   版本 v1.0 · 2026-09-11
   ------------------------------------------------------------
   规则：
   1. 所有颜色/字号/间距/圆角/阴影一律走令牌，业务 CSS 禁硬编码
   2. 同时服务两个平面：咖算云（中控，紧凑）与 咖莱翼（SaaS，舒适）
   3. 密度通过 density 类切换，不通过第二套令牌
   4. 遵循 light 主题为基线，dark 通过 [data-theme="dark"] 覆盖
   ============================================================ */

:root {
  /* ── 品牌色（Brand）────────────────────────────
     主色取蓝：既是 SaaS 的经营信任感，也适配中控的技术感
     辅助色取青绿：用于「进行中/健康」正向态 */
  --c-brand-50:  #eff5ff;
  --c-brand-100: #dbe8ff;
  --c-brand-200: #bcd3ff;
  --c-brand-300: #8eb5ff;
  --c-brand-400: #5b8dff;
  --c-brand-500: #2b6cff;   /* 主色 */
  --c-brand-600: #1a54e0;
  --c-brand-700: #1543b8;
  --c-brand-800: #123a94;
  --c-brand-900: #0f2f75;

  --c-accent-50:  #e8fbf6;
  --c-accent-100: #c9f5ea;
  --c-accent-200: #93ebd7;
  --c-accent-400: #2fd0b3;
  --c-accent-500: #16b59a;  /* 辅助色 */
  --c-accent-600: #0e9179;

  /* ── 中性色（Neutral）────────────────────────
     用于背景/文字/边框/分隔，共 12 级 */
  --c-n-0:   #ffffff;
  --c-n-25:  #fbfcfe;
  --c-n-50:  #f7f9fc;   /* 页面底色 */
  --c-n-100: #f0f3f8;   /* 分区底 */
  --c-n-150: #e8edf5;   /* 表格斑马 */
  --c-n-200: #e3e9f2;   /* 边框 */
  --c-n-300: #cfd8e6;   /* 强边框 */
  --c-n-400: #9aa7ba;   /* 禁用文字/图标 */
  --c-n-500: #5a6675;   /* 次要文字 */
  --c-n-600: #49556a;
  --c-n-700: #3a4557;
  --c-n-800: #1f2733;   /* 主文字 */
  --c-n-900: #131a24;   /* 标题强调 */

  /* ── 语义色（Semantic）────────────────────────
     ⚠️ 遵循中国股市惯例：涨=红、跌=绿
     正向 = 红（增收/盈利），负向 = 绿（亏损/下降） */
  --c-pos-50:  #fdeceb;
  --c-pos-500: #e0483c;   /* 正向：涨 / 盈利 / 增加 */
  --c-pos-600: #c93a2f;

  --c-neg-50:  #e9f8ef;
  --c-neg-500: #1f9d57;   /* 负向：跌 / 亏损 / 减少 */
  --c-neg-600: #178048;

  /* 状态色 */
  --c-ok-50:   #e9f8ef;
  --c-ok-500:  #1f9d57;
  --c-ok-600:  #178048;

  --c-warn-50:  #fff5e8;
  --c-warn-100: #ffe6d5;
  --c-warn-500: #e8830c;
  --c-warn-600: #c96c05;

  --c-bad-50:  #fdeceb;
  --c-bad-500: #e0483c;
  --c-bad-600: #c93a2f;

  --c-info-50:  #eff5ff;
  --c-info-500: #2b6cff;

  /* 状态底 / 状态字 配对（用于芯片、标签、Alert） */
  --c-ok-bg:   var(--c-ok-50);   --c-ok-fg:   var(--c-ok-600);
  --c-warn-bg: var(--c-warn-50); --c-warn-fg: var(--c-warn-600);
  --c-bad-bg:  var(--c-bad-50);  --c-bad-fg:  var(--c-bad-600);
  --c-info-bg: var(--c-info-50); --c-info-fg: var(--c-brand-600);
  --c-idle-bg: var(--c-n-100);   --c-idle-fg: var(--c-n-500);

  /* ── 背景与表面（Surface）────────────────────── */
  --bg-page:    var(--c-n-50);
  --bg-surface: var(--c-n-0);
  --bg-sunken:  var(--c-n-100);
  --bg-raise:   var(--c-n-0);
  --bg-code:    #0f1726;        /* 代码块固定深色，两主题一致 */
  --fg-code:    #dbe7ff;

  /* ── 恒定深色表面（顶栏一级导航）────────────────
     ⚠️ 刻意不随 light/dark 主题反转：顶栏在两种主题下都是深色，
     因此其上的文字必须是「恒定浅色」。若复用 --c-n-0 会随主题
     反转成深色，导致深色顶栏上出现深色文字（不可读）。 */
  --bg-dark:        #1c2331;
  --bg-dark-2:      #232c3d;   /* 顶栏 hover / 次级面 */
  --fg-on-dark:     #e9eef7;
  --fg-on-dark-dim: #98a5b6;
  --bd-on-dark:     rgba(255,255,255,.10);

  /* ── 文字（Text）────────────────────────────── */
  --fg-primary:   var(--c-n-800);
  --fg-second:    var(--c-n-500);
  --fg-tertiary:  var(--c-n-400);
  --fg-inverse:   var(--c-n-0);
  --fg-brand:     var(--c-brand-500);
  --fg-link:      var(--c-brand-600);
  /* ⚠️ 品牌色实底之上的文字恒为白：品牌 500 在 light/dark 两主题下
     都是足够深的彩色，白字对比度始终 ≥ 4.5:1。不可复用 --fg-inverse
     （它引用 --c-n-0，会随 dark 主题反转成深色而失去对比度）。 */
  --fg-on-brand:  #ffffff;

  /* 恒白：开关滑块、图表内白等「不随主题反转」的纯白需求。
     与 --fg-on-brand 的区别是它承载「颜色」语义而非「文字」语义，
     后者一旦被误用于图形仍会随语义演进漂移。 */
  --c-const-white: #ffffff;

  /* 遮罩层（Modal / Drawer 背后的压暗）——也是恒定深色，不随主题反转：
     深色主题下页面本身就暗，遮罩若变浅反而失去了「背后不可点」的暗示 */
  --bg-scrim: rgba(15, 23, 38, .42);

  /* ── 边框（Border）──────────────────────────── */
  --bd-subtle: var(--c-n-100);
  --bd-base:   var(--c-n-200);
  --bd-strong: var(--c-n-300);
  --bd-focus:  var(--c-brand-500);

  /* ── 字体（Typography）────────────────────────
     系统字体栈：中文优先 PingFang / 微软雅黑，数字用等宽以保证金额对齐 */
  --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ff-mono: "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono",
             "Menlo", "Courier New", monospace;
  --ff-num:  "SF Mono", "Cascadia Mono", Consolas, "Helvetica Neue", sans-serif;

  /* 字号：1.200 Minor Third 缩放，基准 14px（比默认 16 更贴工具型产品） */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;   /* body 基准 */
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-38: 38px;

  /* 行高 */
  --lh-tight:  1.25;
  --lh-snug:   1.4;
  --lh-base:   1.6;
  --lh-loose:  1.8;

  /* 字重 */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* 字间距（数字表格场景负数收紧） */
  --ls-tight: -0.01em;
  --ls-num:   -0.02em;

  /* ── 间距（Spacing）：4px 基准网格 ───────────── */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── 圆角（Radius）──────────────────────────── */
  --rd-xs:  3px;
  --rd-sm:  5px;
  --rd-md:  8px;
  --rd-lg:  10px;
  --rd-xl:  14px;
  --rd-full: 999px;

  /* ── 阴影（Shadow）：克制，用边框替代大部分层级 ── */
  --sh-xs: 0 1px 2px rgba(31,39,51,.05);
  --sh-sm: 0 1px 3px rgba(31,39,51,.07), 0 1px 2px rgba(31,39,51,.04);
  --sh-md: 0 4px 12px rgba(31,39,51,.08), 0 1px 3px rgba(31,39,51,.04);
  --sh-lg: 0 12px 28px rgba(31,39,51,.12), 0 2px 6px rgba(31,39,51,.06);
  --sh-focus: 0 0 0 3px rgba(43,108,255,.18);
  --sh-focus-bad: 0 0 0 3px rgba(224,72,60,.18);

  /* ── 层级（Z-index）──────────────────────────── */
  --z-base:    0;
  --z-sticky:  100;
  --z-drawer:  200;
  --z-dropdown:300;
  --z-modal:   400;
  --z-toast:   500;
  --z-tooltip: 600;

  /* ── 尺寸（Layout）───────────────────────────── */
  --h-control-sm: 28px;
  --h-control:    34px;   /* 默认控件高 */
  --h-control-lg: 40px;
  --h-topbar:     52px;
  --w-nav-compact: 72px;  /* 咖算云：图标栏 */
  --w-nav-wide:    240px; /* 咖莱翼：文字栏 */
  --w-nav-collapsed: 64px;

  /* ── 双栏导航布局尺寸（E店通式布局对齐）────────
     参 E店通（edian.net.cn）后台：深色顶栏承载「域」，
     浅色左栏承载「页」，主区卡片化。
     数值取自截图实测并按 4px 网格取整。 */
  --h-global-nav:   48px;   /* 顶栏一级导航（深色） */
  --h-global-nav-sm: 42px;  /* compact 密度 */
  --w-subnav:       156px;  /* 左侧二级菜单（浅色） */
  --w-subnav-collapsed: 52px;
  --h-subnav-item:  38px;   /* 二级菜单项高 */
  --h-notice-bar:   34px;   /* 公告条 */
  --pad-page:       16px;   /* 主区页面内边距 */
  --gap-card:       12px;   /* 仪表盘卡片间距（比 sp-4 更紧，为容纳更多卡片） */
  --sz-icon-tile:   44px;   /* 图标网格中图块尺寸 */
  --sz-avatar:      28px;   /* 顶栏头像 */

  /* 图表配色序列（data-viz 专用，与品牌色解耦，避免主题切换引起误读） */
  --viz-1: #ff6a00;
  --viz-2: #2b6cff;
  --viz-3: #16b59a;
  --viz-4: #e8830c;
  --viz-5: #8b5cf6;
  --viz-6: #64748b;

  /* 排行榜名次徽标（前三名）——属数据可视化语义，非品牌色 */
  --viz-gold:   #d9a300;
  --viz-silver: #94a3b8;
  --viz-bronze: #b87333;

  /* ── 价格强调（Price）────────────────────────
     ⚠️ 刻意独立于 --c-brand-*：中文电商语境里价格恒为暖色（红/橙），
     即使品牌主题切到冷蓝，价格也必须保持暖色 —— 否则用户会失去
     「这是价格」的视觉直觉。也不要复用 --c-pos-500（涨红），
     否则「价格」与「上涨」两个含义会在同一屏里撞色。 */
  --c-price:       #ff6a00;
  --c-price-strong:#e85c00;

  /* ── 品牌软底（Brand-Soft Surface）──────────────
     ⚠️ 为什么不直接用 --c-brand-50 / 100 / 200：
     那三级是**浅色阶**，深色主题下并未反转（深色只提亮了 500/600，
     让它们在深底上可读）。若直接拿 50/100 当背景，深色模式下会得到
     「近白底 + 浅色字」→ 对比度崩塌。这里单独开一组会在深色下反转
     的软底令牌，作为图标底色 / 徽标底 / 选中态底的唯一出处。 */
  --bg-brand-soft:    var(--c-brand-50);
  --bg-brand-soft-2:  var(--c-brand-100);
  --bd-brand-soft:    var(--c-brand-200);
  --fg-on-brand-soft: var(--c-brand-700);

  /* ── 交互态底（State Surface）────────────────
     列表页三态：默认 / 悬停 / 选中。
     选中态用品牌淡底 + 品牌边框双重编码，不单靠底色（淡底在低质量
     屏幕上可能被压成灰白，边框能兜住可辨识度）。 */
  --bg-row-hover:  var(--c-n-100);
  --bg-selected:   var(--bg-brand-soft);
  --bd-selected:   var(--bd-brand-soft);

  /* ── 动效（Motion）────────────────────────────
     工具型产品：快、克制，尊重 prefers-reduced-motion */
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  280ms;
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);

  /* ── 密度（Density）───────────────────────────── */
  --density-row-h:   38px;   /* 表格行高 */
  --density-pad-y:   var(--sp-4);
  --density-pad-x:   var(--sp-5);
  --density-gap:     var(--sp-4);
  --density-fs:      var(--fs-14);
}

/* ══════════════════════════════════════════════
   密度变体：咖算云中控用 compact，咖莱翼用 comfort
   ══════════════════════════════════════════════ */
[data-density="compact"] {
  --density-row-h:  30px;
  --density-pad-y:  var(--sp-3);
  --density-pad-x:  var(--sp-4);
  --density-gap:    var(--sp-3);
  --density-fs:     var(--fs-13);
  --h-control:      30px;
  --h-topbar:       46px;
}

/* ══════════════════════════════════════════════
   深色主题
   ══════════════════════════════════════════════ */
[data-theme="dark"] {
  --c-n-0:   #0e131c;   /* 反转：0 变成最深 */
  --c-n-25:  #121824;
  --c-n-50:  #0e131c;
  --c-n-100: #161d2a;
  --c-n-150: #1b2333;
  --c-n-200: #263244;
  --c-n-300: #34435c;
  --c-n-400: #7e8fa6;
  --c-n-500: #9fb0c5;
  --c-n-600: #b6c5d8;
  --c-n-700: #cdd9e8;
  --c-n-800: #e8eef7;
  --c-n-900: #f4f8ff;

  --c-brand-500: #5b8dff;
  --c-brand-600: #7ea6ff;
  --c-accent-500: #2fd0b3;

  --c-pos-500: #ff6b5e;
  --c-neg-500: #39c077;
  --c-ok-500:  #39c077;
  --c-warn-500:#f0a23a;
  --c-bad-500: #ff6b5e;

  --c-ok-bg:   rgba(57,192,119,.14);  --c-ok-fg:   #5fd68f;
  --c-warn-bg: rgba(240,162,58,.14);  --c-warn-fg: #f5b562;
  --c-bad-bg:  rgba(255,107,94,.14);  --c-bad-fg:  #ff8b80;
  --c-info-bg: rgba(91,141,255,.16);  --c-info-fg: #8fb0ff;
  --c-idle-bg: rgba(159,176,197,.12); --c-idle-fg: #9fb0c5;

  /* 深色下 --c-brand-50/100/200 仍是浅色阶，软底改用半透明品牌色叠加。
     软底令牌是唯一出处，--bg-selected / --bd-selected 自动跟随，无需重复定义。 */
  --c-price:          #ff8534;
  --c-price-strong:   #ffa060;
  --bg-row-hover:     rgba(255,255,255,.05);
  --bg-brand-soft:    rgba(91,141,255,.16);
  --bg-brand-soft-2:  rgba(91,141,255,.24);
  --bd-brand-soft:    rgba(91,141,255,.34);
  --fg-on-brand-soft: #9db9ff;

  --bg-page:    #0e131c;
  --bg-surface: #161d2a;
  --bg-sunken:  #0a0f18;
  --bg-raise:   #1b2333;
  --bg-code:    #0a0f18;
  --fg-code:    #cfe0ff;

  /* 深色主题下顶栏要「比页面更深」才维持层级感（浅色主题是反过来的） */
  --bg-dark:    #080d15;
  --bg-dark-2:  #131b27;
  --fg-on-dark: #e2e9f4;
  --bg-scrim:   rgba(0, 0, 0, .60);

  --sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm: 0 1px 3px rgba(0,0,0,.45);
  --sh-md: 0 4px 12px rgba(0,0,0,.5);
  --sh-lg: 0 12px 28px rgba(0,0,0,.6);

  color-scheme: dark;
}

/* ══════════════════════════════════════════════
   基础重置（最小化，避免污染现有 app.js）
   ══════════════════════════════════════════════ */
.kx-scope, .kx-scope * { box-sizing: border-box; }

/* ══════════════════════════════════════════════
   品牌主色主题（Brand Theme）
   ------------------------------------------------------------
   为什么做成可切换而不是直接改掉蓝色：
   · 咖莱翼服务「餐饮外卖经营」，暖橙在食物/经营语境下更贴切，
     且同业（外卖平台、E店通等后台）普遍用暖色，用户迁移成本低。
   · 但咖算云（中控）是技术运维平面，冷蓝的技术感不可丢。
   · 因此：色相可切，**语义色与中性色不动**——
     涨红跌绿、状态四色、12 级中性色在任何主题下完全一致，
     保证「颜色含义」不随品牌换肤而漂移。
   ⚠️ 切换品牌主题绝不会影响 --c-pos-* / --c-neg-* / --c-ok|warn|bad-*，
      这是硬约束：语义色与品牌色必须解耦。
   ══════════════════════════════════════════════ */
[data-brand="orange"] {
  --c-brand-50:  #fff4ed;
  --c-brand-100: #ffe6d5;
  --c-brand-200: #ffc9a8;
  --c-brand-300: #ffa673;
  --c-brand-400: #ff8542;
  --c-brand-500: #ff6a00;   /* 主色：对齐 E店通橙 */
  --c-brand-600: #e85c00;
  --c-brand-700: #c24a00;
  --c-brand-800: #983b00;
  --c-brand-900: #6f2b00;

  --c-info-50:  #fff4ed;
  --c-info-bg:  var(--c-info-50);
  --c-info-fg:  var(--c-brand-600);

  --sh-focus:      0 0 0 3px rgba(255,106,0,.20);
  --sh-focus-bad:  0 0 0 3px rgba(224,72,60,.18);

  color-scheme: light;
}

/* 深色 + 橙色：提升明度，保证在深底上对比度 ≥ 4.5:1 */
[data-brand="orange"][data-theme="dark"] {
  --c-brand-500: #ff8534;
  --c-brand-600: #ffa060;
  --c-brand-700: #ffbb8a;
  --c-info-fg:   #ffa060;
  --c-info-bg:   rgba(255,133,52,.16);
  --bg-brand-soft:    rgba(255,133,52,.16);
  --bg-brand-soft-2:  rgba(255,133,52,.24);
  --bd-brand-soft:    rgba(255,133,52,.36);
  --fg-on-brand-soft: #ffbb8a;
}

/* 无障碍：尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}