/* =========================================================================
   FinStack Design Tokens — 单一来源的 CSS 变量体系
   "Midnight Finance" 深色旗舰质感 · 暖金品牌色
   使用方式：<link rel="stylesheet" href="/static/design-tokens.css?v=554057c1" />
   所有页面统一从此文件引用，禁止在页面内联 :root 中重复定义。
   ========================================================================= */

:root {
  /* ── 背景层级 ── */
  --bg-0: #07080c;
  --bg-1: #0c0d12;
  --bg-2: #12131a;
  --bg-3: #181a24;

  /* ── 表面覆盖 ── */
  --surface-0: rgba(255,255,255,0.025);
  --surface-1: rgba(255,255,255,0.045);
  --surface-2: rgba(255,255,255,0.07);
  --surface-3: rgba(255,255,255,0.10);

  /* ── 边框 ── */
  --border-0: rgba(255,255,255,0.05);
  --border-1: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.13);
  --border-3: rgba(255,255,255,0.20);

  /* ── 文字 ── */
  --text-0: #f0ede6;
  --text-1: #d9d5cb;
  --text-2: #aaa493;
  --text-3: rgba(216,212,200,0.68);

  /* ── 品牌色：暖金 ── */
  --gold: #c8a255;
  --gold-light: #dbb96a;
  --gold-dim: rgba(200,162,85,0.12);
  --gold-glow: rgba(200,162,85,0.30);
  --gold-grad: linear-gradient(135deg, #c8a255 0%, #dbb96a 50%, #b8924a 100%);

  /* ── 辅助色 ── */
  --blue: #5b8def;
  --blue-dim: rgba(91,141,239,0.10);
  --violet: #9775e0;
  --violet-dim: rgba(151,117,224,0.10);

  /* ── 状态色 ── */
  --ok: #4ade80;
  --ok-dim: rgba(74,222,128,0.10);
  --warn: #fbbf24;
  --warn-dim: rgba(251,191,36,0.10);
  --err: #f87171;
  --err-dim: rgba(248,113,113,0.10);

  /* ── 圆角 ── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  /* ── 间距 ── */
  --gap: 14px;

  /* ── 阴影 ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);

  /* ── 向后兼容别名（供 JS 内联样式引用） ── */
  --text-strong: var(--text-0);
  --text: var(--text-1);
  --text-muted: var(--text-2);
  --text-faint: var(--text-3);
  --amber: #d4a04a;
  --amber-bg: rgba(212,160,74,0.10);
  --hud: var(--gold);
  --hud-dim: var(--gold-dim);
  --brand: var(--gold);
  --accent-grad: var(--gold-grad);
  --err-bg: var(--err-dim);
}
/* =========================================================================
   追加（2026-09-20）· P0 产品化补齐
   以下三组此前完全缺失，是「页面各自造轮子」的根因之一：
     1. 排版系统 —— 此前未定义任何字体栈/字号阶梯，全靠浏览器默认
     2. 数字排版 —— 金融界面的专业度基线，此前全站缺失
     3. 涨跌语义色 —— 此前各页硬编码 hex，且未区分市场惯例
   ========================================================================= */

:root {
  /* ── 字体栈 ──
     中文优先：系统 UI 字体 → 各平台中文字体 → 兜底。
     mono 用于数字/代码，配合 tabular-nums 使用。 */
  --font-sans: system-ui, -apple-system, "Segoe UI", "Noto Sans SC",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  /* ── 字号阶梯 ── */
  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;
  --fs-16: 16px;  --fs-20: 20px;  --fs-26: 26px;  --fs-34: 34px;

  /* ── 行高 / 字重 ── */
  --lh-tight: 1.25;  --lh-base: 1.5;  --lh-loose: 1.7;
  --fw-normal: 400;  --fw-medium: 500;  --fw-semibold: 600;

  /* ── 涨跌语义色（默认取 A 股惯例：红涨绿跌）──
     注意市场惯例相反：美股/港股为绿涨红跌。
     用法：在 <html data-market="US"> 上切换，勿在页面里硬编码涨跌色。
     渲染涨跌的容器加 class="num"，即可同时获得等宽数字。 */
  --up: #f87171;
  --down: #4ade80;
  --up-dim: rgba(248,113,113,0.10);
  --down-dim: rgba(74,222,128,0.10);
  --flat: var(--text-2);

  /* ── 密度（专业用户默认紧凑）── */
  --density-gap: 14px;
  --density-row-h: 40px;

  /* ── 补齐缺失的语义别名（与既有 --err-bg 同款；admin.html 曾内联定义）── */
  --ok-bg: var(--ok-dim);
  --warn-bg: var(--warn-dim);
  --info-bg: var(--blue-dim);

  /* ── 动效（见 docs/PRODUCTIZATION_DESIGN.md §5）──
     原则：动效是**状态变化的解释**，不是装饰。分析师读数的场景下，多余的动画
     等于噪音。所以这里只放"能解释什么变化"的四档时长，页面不要自己写 0.18s。

     时长：
       --dur-instant  纯属性切换（颜色、边框）
       --dur-fast     hover / focus / 按钮按下
       --dur-base     元素进出、下拉展开
       --dur-slow     面板级转场（上限）
       --dur-flash    值变化反馈（§5.3-2）。**唯一超过 300ms 的一档，且只准一次性**：
                      它解释的是"这个读数刚刚变了"，600ms 是能读出来又不至于分心的长度。
                      §5.2 原来写"单次动画 ≤ 300ms"与 §5.3 的 600ms 互相打架，
                      取舍记在此处：300ms 约束的是**转场类**动画，值变化染色单独一档。
     缓动：进入用 --ease-out、退出用 --ease-in、位移尺寸变化用 --ease-inout。
     位移：--move-sm/md（≤12px 是硬约束，位移过大在密集表格里等于"页面在抖"）。
     列表错峰：--stagger，最多前 8 项（再多就是让用户等动画）。
     降级：唯一的全局 prefers-reduced-motion 开关在本文件末尾（`*` 一网打尽）。
     放这里而不是 components.css 的理由：它必须落在**每个页面都会加载**的文件里，
     而首页按设计不加载 components.css —— 实测首页 index.html 有 21 处硬编码动效
     时长，降级开关却够不着它。门禁 C21 现在校验"恰好一处 + 每页都加载"（此前只看
     文件名，正是这个盲区让首页漏了）。 */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    300ms;
  --dur-flash:   600ms;
  /* 持续告警脉冲：全站唯一允许 `infinite` 的一档，只给"需要一直吸引注意的状态
     标签"用（风险标签 HIGH ALERT）。它不是转场、也不是值变化反馈 —— 所以既不能
     借 --dur-flash（那一档明确定义为一次性），也不该在页面里写死 1s。 */
  --dur-pulse:   1s;
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --ease-inout:  cubic-bezier(.4, 0, .2, 1);
  --move-sm:     4px;
  --move-md:     8px;
  --stagger:     32ms;

}

/* ── 市场维度：美股/港股 绿涨红跌 ── */
[data-market="US"], [data-market="HK"] {
  --up: #4ade80;
  --down: #f87171;
  --up-dim: rgba(74,222,128,0.10);
  --down-dim: rgba(248,113,113,0.10);
}

/* ── 密度档 ── */
[data-density="compact"] { --density-gap: 8px;  --density-row-h: 32px; }
[data-density="roomy"]   { --density-gap: 20px; --density-row-h: 48px; }

/* ── 数字排版：金融界面的专业度基线 ──
   所有金额/百分比/指标统一等宽数字，否则数据刷新时列宽跳动。
   容器加 class="num"，或直接用 .num 包裹。
   表格全覆盖：本产品每张表都是数字密集（回测明细、持仓、冲击影响…），
   而 pages 各自重定义了 table.bt / table.tbl / table.impact / table.data，
   所以约定放在这一层，别再逐页加。 */
.num,
.kpi-value,
td.num,
th.num,
.fs-num,
table th,
table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 涨跌着色工具类（配合 --up/--down，自动随市场切换） */
.num.up   { color: var(--up); }
.num.down { color: var(--down); }
.num.flat { color: var(--flat); }

/* ── 全局排版基线 ── */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
}
code, pre, kbd, samp { font-family: var(--font-mono); }

/* ── 品牌色：第三方厂商标识色 ──
   这不是「主题色」，不该随主题变化，故独立命名空间。
   用途：模型设置页的厂商卡片左边框 / 名称着色 / 品牌点。
   此前这些色值以 hex 硬编码在 admin.html 的 JS 数据数组里。 */
:root {
  --brand-openai: #10a37f;
  --brand-anthropic: #dc2626;
  --brand-google: #8b5cf6;
  --brand-deepseek: #3b82f6;
  --brand-dashscope: #f59e0b;
  --brand-siliconflow: #10b981;
  --brand-volcengine: #ef4444;
  --brand-custom: #6b7280;

  /* ── 分类色板：数据源分类 / 图表序列 ──
     需要「彼此可区分」的配色，与语义色（ok/warn/err）职责不同。 */
  --chart-1: #5aa8ff;
  --chart-2: #7c8cff;
  --chart-3: #f59e0b;
  --chart-4: #34d399;
  --chart-5: #a76bff;
  --chart-6: #22c55e;
  --chart-7: #22d3ee;
  --chart-8: #94a3b8;
}

/* ── P0 阶段二新增（2026-09-20）── */
:root {
  --white: #ffffff;
  --on-accent: #0a0b0e;            /* 金色/亮色底上的深色文字 */

  /* 语义色的浅一档：渐变端 / hover 态 */
  --blue-light: #7aa0f5;
  --violet-light: #b18cf0;
  --ok-light: #79e6a5;
  --warn-light: #fcd34d;
  --err-light: #ff8f8f;
  --ok-dark: #059669;

  /* 金色梯度延伸（头像环等装饰） */
  --gold-200: #e8d5a0;
  --gold-300: #f0e0b0;
  --gold-600: #a07830;
  --gold-700: #8a6e2f;

  /* 玻璃拟态表面（顶栏 / 悬浮胶囊） */
  --glass-bg-soft: #10151f;
  --glass-border: rgba(255,255,255,0.08);

  /* 情报类目 chip（crucix / intel 共用配色 + 同色 12% 底） */
  --chip-warm: #ff8a5c;
  --chip-warm-dim: rgba(255,138,92,0.12);
  --chip-violet: #9b8cff;
  --chip-violet-dim: rgba(155,140,255,0.12);
}

/* ── intel（情报监控台）页主题：青绿 HUD ──
   该页刻意使用青绿配色以区别于全站金色，属**有意的页面主题**而非漂移，
   因此在此集中声明，而不是内联在页面 :root 里。
   启用方式：<html class="theme-hud"> */
.theme-hud {
  --hud: #46e6c8;
  --hud-dim: rgba(70,230,200,0.18);
  --hud-text: #41e0c8;
  --hud-glow: rgba(70,230,200,0.50);
  --amber: #ffb454;
  --amber-bg: rgba(255,180,84,0.10);
}

/* ── P0 阶段三新增：图表序列延伸 + 地图调色板 ── */
:root {
  --gold-500: #b8924a;

  /* 图表序列延伸（原散落在 factor/portfolio/intel/worldmap 各处） */
  --chart-9:  #7fc8a9;
  --chart-10: #c084fc;
  --chart-11: #f0b3c3;
  --chart-12: #4da3ff;
  --chart-13: #a78bfa;
  --chart-14: #ffb14e;
  --chart-15: #ff5d5d;
  --chart-16: #41e0c8;
  --chart-muted: #8aa0c2;   /* 图表中性/次级标注色 */

  /* 地图调色板（worldmap.js 专用）
     注：蓝灰文字色现有 7 档，P1 可考虑收敛为 3~4 档；
     本次先原样收编以保证零视觉变更。 */
  --map-ocean: #0e2d55;
  --map-ocean-deep: #0a1d3d;
  --map-ocean-mid: #0c2749;
  --map-text-0: #d7e6f5;
  --map-text-1: #c7d8ea;
  --map-text-2: #c9dcf0;
  --map-text-3: #b7c9dc;
  --map-text-4: #9db4cc;
  --map-text-5: #8fb3d9;
  --map-text-6: #7d95ad;
  --map-text-7: #6f8aa5;
  --map-link: #78d9ff;
  --map-link-light: #aae5ff;
  --map-coast: #eaf3ff;
}

/* ── 无障碍：尊重系统"减少动态效果"偏好（全站唯一一处，门禁 C21）──
   通配式一网打尽（0.01ms），而不是让动画"转得慢一点"：对 reduced-motion 用户，
   慢动作同样是动效。位置选在本文件 = 全站最底层，因为 17 个页面全都加载它；
   此前放在 components.css，而首页按设计不加载 components.css —— 于是首页的
   入场动画与值变化闪色对系统偏好完全免疫（门禁当时只比对文件名，没校验加载覆盖，
   静默通过）。C21 现在要求：开关恰好一处，且**每个页面都加载**它所在的文件。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}