/*
 * 设计令牌唯一真源（基线：Cockpit design-system tokens.css）。
 * 三个页面（dashboard / workbench / hyperliquid）共用本文件；
 * 页面私有变量应指向这里的令牌，不得另定义颜色字面量。
 *
 * 数据色（dark 基线）经 Cockpit dataviz 验证器实测 PASS：
 *   亮度带 / 色度下限 / 色盲分离 / 常视分离 / 对比度 ≥3:1 ✓
 *   琥珀↔红 deutan ΔE 7.0（地板带）→ 状态永远带图标+文字（↑/↓），绝不单靠颜色。
 * light 变体按同色相提高对比推导，未跑验证器；色弱变体用 Okabe-Ito 蓝/橙。
 *
 * 统一断点（媒体查询不能用变量，此处为约定值）：1200px / 900px / 600px。
 */

:root {
    /* —— 表面与线条 —— */
    --bg:        #070b14;
    --bg-grad-1: #0e1a33;
    --bg-grad-2: #0a2231;
    --surface:   #0d1526;
    --surface-2: #111c31;
    --line:      #1e2b45;
    --line-hi:   #2e4468;

    /* —— 文字 —— */
    --ink:       #e4ecf8;   /* 主文字 */
    --ink-2:     #a8b8d4;   /* 次文字 */
    --muted:     #6b7c9c;   /* 弱文字/来源标签 */
    --ink-max:   #ffffff;   /* 金额等最高优先级数字 */

    /* —— 数据色（承载数据的标记只允许用这一组）—— */
    --d-health:  #1ea87c;
    --d-xp:      #8168e0;
    --d-warn:    #bf8420;
    --d-crit:    #d9505d;
    --d-accent:  #3a86c9;

    /* —— 金融语义（页面业务色一律引用这层）—— */
    --up:        var(--d-health);   /* 上涨/健康，配 ↑ */
    --down:      var(--d-crit);     /* 下跌/失败，配 ↓ */
    --caution:   var(--d-warn);
    --neutral:   var(--muted);
    --accent:    var(--d-accent);   /* 链接/焦点/选中 */
    --up-bg:     #0d2a20;
    --down-bg:   #2e1218;
    --caution-bg:#2b1f0a;
    --accent-bg: #10233a;

    /* —— 装饰色（仅光晕与描边，不承载数据）—— */
    --glow-health: #2fe0a6;
    --glow-xp:     #a78bfa;
    --glow-accent: #5cb8f5;
    --glow-warn:   #f0a93c;
    --glow-crit:   #ff6b78;

    /* —— 排版 —— */
    --font-ui:   "Segoe UI", "Microsoft YaHei", sans-serif;
    --font-mono: "Consolas", "Cascadia Mono", ui-monospace, monospace;
    --fs-display: 26px;
    --fs-h1:      15px;
    --fs-body:    13.5px;
    --fs-sm:      12px;
    --fs-caps:    10px;   /* 全大写标签，letter-spacing .16em */
    --lh-tight:   1.25;
    --lh-body:    1.6;

    /* —— 间距 —— */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

    /* —— 圆角与效果 —— */
    --r-sm: 4px; --r-md: 8px; --r-lg: 10px; --r-full: 9999px;
    --shadow-card: 0 1px 3px rgba(0,0,0,.4);
    --shadow-lift: 0 6px 22px rgba(0,0,0,.5);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--d-accent);
    --transition: .16s ease;
}

/* —— 浅色主题：仅换值，选择器/结构不变 —— */
html[data-theme="light"] {
    --bg:        #edf3f9;
    --bg-grad-1: #f7faff;
    --bg-grad-2: #eef4f9;
    --surface:   #ffffff;
    --surface-2: #f4f8fc;
    --line:      #cbd7e5;
    --line-hi:   #9fb3cc;

    --ink:       #17263b;
    --ink-2:     #44576f;
    --muted:     #5d7088;
    --ink-max:   #0a1626;

    --d-health:  #0f7a58;
    --d-xp:      #6247c9;
    --d-warn:    #955f0a;
    --d-crit:    #bd2f42;
    --d-accent:  #22689f;

    --up-bg:     #e2f3ec;
    --down-bg:   #fae8ea;
    --caution-bg:#f7efdd;
    --accent-bg: #e3eef7;

    --shadow-card: 0 1px 3px rgba(23,38,59,.12);
    --shadow-lift: 0 6px 22px rgba(23,38,59,.16);
}

/* —— 色弱模式：涨跌换 Okabe-Ito 蓝/橙；依旧必须带 ↑/↓ 文字方向 —— */
html[data-color-mode="colorblind"] {
    --up:      #0072b2;
    --down:    #d55e00;
    --caution: #b26b00;
    --up-bg:   rgba(0, 114, 178, .12);
    --down-bg: rgba(213, 94, 0, .12);
}