/* AI商品智枢 · 设计变量（唯一一套，网页端与桌面端共用）。规范见 docs/规范/前端规范.md。
   定位：科技金融——克制、专业、数据优先、可信。中性底色 + 一个金融蓝强调色；颜色只用在数据和状态上。
   涨跌按国内习惯：红涨绿跌（--up 红、--down 绿）。注意「涨跌」和「状态」是两套语义：
   状态里绿 = 正常/成功、红 = 故障/失败，与涨跌无关，不要混用。

   主题切换：
   - 网页端：<html data-theme="light|dark">（/assets/js/theme.js 写入）。不带 data-theme 时按浅色。
   - 桌面端：页面不写 data-theme，默认深色，<body class="light"> 为浅色（desktop/control.js 切换），
     所以深色还挂在 html:not([data-theme]) body:not(.light) 上。
   网页端服务只放出 web/assets，那里有一份逐字节相同的副本 web/assets/css/tokens.css；改这里后同步复制过去。 */

/* ===================== 浅色（默认） ===================== */
:root {
  /* ---- 底色层级：页面底 → 卡片 → 次级底 → 更深一级 ---- */
  --bg: #f5f6f8;
  --card: #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #eef0f3;
  --hover: #f2f4f7;
  --active: #e8ebf0;            /* 选中行 / 导航当前项（中性，不用强调色） */
  --input-bg: #ffffff;
  --overlay: rgba(245, 246, 248, .82);   /* 加载遮罩 */
  --mask: rgba(17, 20, 26, .42);          /* 弹窗 / 抽屉背后的遮罩 */
  --reader-bg: #eceef2;                   /* 报告阅读区四周 */
  --mark-bg: #fdeaa6;                     /* 搜索命中高亮 */

  /* ---- 文字层级（都在白底上 ≥ 4.5:1） ---- */
  --text: #15181d;
  --text-dim: #5a6270;
  --text-faint: #6f7785;

  /* ---- 边框：卡片边 / 控件边 / 行分隔 ---- */
  --line: #e3e6eb;
  --line-strong: #cdd2da;
  --rule: #eef0f3;

  /* ---- 强调色（金融蓝）：主按钮、链接、焦点、选中；不铺在大面积底色上 ---- */
  --accent: #1f5bd1;
  --accent-hover: #1a4cb0;
  --accent-soft: #e9f0fd;
  --accent-fg: #1a4cb0;          /* 浅蓝底上的文字 */
  --on-accent: #ffffff;          /* 主按钮上的文字 */
  --focus-ring: 0 0 0 3px rgba(31, 91, 209, .18);
  /* 同一颜色的 RGB 三元组，给 rgba(var(--accent-rgb), .3) 这类半透明用 */
  --accent-rgb: 31, 91, 209;
  --success-rgb: 26, 127, 75;
  --danger-rgb: 198, 47, 53;
  --warning-rgb: 180, 83, 9;
  /* 中性半透明填充：叠在任意底色上的浅灰（悬停、行底、代码块） */
  --fill-1: rgba(16, 24, 40, .03);
  --fill-2: rgba(16, 24, 40, .06);
  --fill-3: rgba(16, 24, 40, .10);

  /* ---- 行情涨跌（红涨绿跌） ---- */
  --up: #d1343a;
  --up-bg: #fdeced;
  --down: #12875a;
  --down-bg: #e5f4ed;
  --flat: #5a6270;

  /* ---- 状态色：正常 / 警告 / 故障 / 信息（徽标、格子、提示条用成对的 底 + 字 + 边） ---- */
  --success: #1a7f4b;  --danger: #c62f35;  --warning: #b45309;
  --green: var(--success);  --red: var(--danger);  --orange: var(--warning);   /* 旧名，网页样式在用 */
  --c-green-bg: #e8f5ee;  --c-green-fg: #135c38;  --c-green-line: #b5dfc7;
  --c-yellow-bg: #fdf6e3; --c-yellow-fg: #7a4d00; --c-yellow-line: #efd393;
  --c-red-bg: #fdeeee;    --c-red-fg: #9b1c22;    --c-red-line: #f2c2c4;
  --c-grey-bg: #f1f3f5;   --c-grey-fg: #6f7785;
  --c-blue-bg: #ebf1fd;   --c-blue-fg: #1a4cb0;   --c-blue-line: #c3d5f6;
  /* 分类标签用的低饱和色（只做区分，不表达好坏） */
  --c-orange-bg: #fcf0e6; --c-orange-fg: #8a3c0c; --c-orange-line: #e8c9ae;
  --c-purple-bg: #f1eff7; --c-purple-fg: #54487a; --c-purple-line: #d5cde8;
  --c-pink-bg: #f8eef2;   --c-pink-fg: #7e3654;
  --c-indigo-bg: #edf0f8; --c-indigo-fg: #364780;
  /* 品种标签色（AI研究 / 研报总结）：只做区分，不表达好坏 */
  --v-a-bg: #e0ebfc;  --v-a-fg: #164377;   /* A股 */
  --v-us-bg: #e5e3f4; --v-us-fg: #413a74;  /* 美股 */
  --v-fu-bg: #fbe7d2; --v-fu-fg: #6f3208;  /* 高硫燃料油 */
  --v-jm-bg: #e3edf2; --v-jm-fg: #24485c;  /* 焦煤 */
  --v-lc-bg: #ddf0e7; --v-lc-fg: #125741;  /* 碳酸锂 */
  --v-fg-bg: #ddeef9; --v-fg-fg: #175377;  /* 玻璃 */
  --v-eg-bg: #ece6f6; --v-eg-fg: #4c3a70;  /* 乙二醇 */
  --v-ma-bg: #f7e5ec; --v-ma-fg: #73294b;  /* 甲醇 */
  --v-cj-bg: #f7e4d7; --v-cj-fg: #6f2f17;  /* 红枣 */

  /* ---- 图表分类色（多条线时按顺序取；单条线只用 --series-1） ---- */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
  --series-4: #eda100; --series-5: #e87ba4; --series-6: #6250d6;

  /* ---- 侧栏：和页面同一套中性色，不用深蓝底 ---- */
  --side-bg: #ffffff;
  --side-fg: #3d4450;
  --side-fg-strong: #15181d;
  --side-fg-dim: #6f7785;
  --side-line: #e3e6eb;
  --side-hover: #f2f4f7;
  --side-active: #e8ebf0;
  --side-active-fg: #15181d;

  /* ---- 字体：中文无衬线；数字一律等宽（表格数字） ---- */
  --font: "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, "Microsoft YaHei UI", monospace;
  --num: tabular-nums;           /* 用法：font-variant-numeric: var(--num) */

  /* ---- 字号阶梯 ---- */
  --fs-xs: 11px;    /* 角标、图表刻度（最小，不再往下） */
  --fs-sm: 12px;    /* 说明、表头、标签 */
  --fs-md: 13px;    /* 控件、表格正文 */
  --fs-base: 14px;  /* 正文 */
  --fs-lg: 16px;    /* 卡片 / 面板标题 */
  --fs-xl: 18px;    /* 页面标题 */
  --fs-2xl: 22px;   /* 关键数字 */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.3; --lh: 1.5; --lh-loose: 1.7;

  /* ---- 间距阶梯（4 的倍数） ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ---- 圆角（紧凑风格：小圆角，层层递减） ---- */
  --radius-xs: 3px;     /* 格子、色块 */
  --radius-sm: 4px;     /* 标签、徽标 */
  --radius: 6px;        /* 按钮、输入框、卡片 */
  --radius-lg: 8px;     /* 弹窗、抽屉、浮层 */
  --radius-pill: 999px;

  /* ---- 控件尺寸 ---- */
  --ctl-h: 34px;
  --ctl-h-sm: 28px;

  /* ---- 阴影：静止的卡片不用阴影；只给浮起来的东西（菜单、提示、弹窗） ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 4px 16px rgba(16, 24, 40, .10);
  --shadow-lg: 0 16px 48px rgba(16, 24, 40, .18);

  /* ---- 动效时长 ---- */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  color-scheme: light;
}

/* ===================== 深色（中性深灰，不用藏青） ===================== */
:root[data-theme="dark"],
html:not([data-theme]) body:not(.light) {
  --bg: #0f1012;
  --card: #17181b;
  --surface-2: #1c1d21;
  --surface-3: #222428;
  --hover: #202226;
  --active: #26292e;
  --input-bg: #121316;
  --overlay: rgba(15, 16, 18, .82);
  --mask: rgba(0, 0, 0, .6);
  --reader-bg: #0b0c0e;
  --mark-bg: rgba(240, 192, 64, .32);

  --text: #e7e9ec;
  --text-dim: #a2a8b2;
  --text-faint: #858b95;

  --line: #2a2c31;
  --line-strong: #3b3e45;
  --rule: #222428;

  --accent: #4f86ec;
  --accent-hover: #6c9bf0;
  --accent-soft: rgba(79, 134, 236, .16);
  --accent-fg: #a8c3f8;
  --on-accent: #ffffff;
  --focus-ring: 0 0 0 3px rgba(79, 134, 236, .32);
  --accent-rgb: 79, 134, 236;
  --success-rgb: 63, 191, 127;
  --danger-rgb: 240, 106, 111;
  --warning-rgb: 224, 160, 58;
  --fill-1: rgba(255, 255, 255, .03);
  --fill-2: rgba(255, 255, 255, .06);
  --fill-3: rgba(255, 255, 255, .12);

  --up: #f0585e;
  --up-bg: rgba(240, 88, 94, .14);
  --down: #2fb67c;
  --down-bg: rgba(47, 182, 124, .14);
  --flat: #a2a8b2;

  --success: #3fbf7f;  --danger: #f06a6f;  --warning: #e0a03a;
  --green: var(--success);  --red: var(--danger);  --orange: var(--warning);
  --c-green-bg: rgba(63, 191, 127, .14);  --c-green-fg: #86d9ad;  --c-green-line: rgba(63, 191, 127, .38);
  --c-yellow-bg: rgba(224, 160, 58, .15); --c-yellow-fg: #f0c879; --c-yellow-line: rgba(224, 160, 58, .38);
  --c-red-bg: rgba(240, 106, 111, .15);   --c-red-fg: #f5a3a6;    --c-red-line: rgba(240, 106, 111, .4);
  --c-grey-bg: #1f2125;                   --c-grey-fg: #7d838d;
  --c-blue-bg: rgba(79, 134, 236, .16);   --c-blue-fg: #a8c3f8;   --c-blue-line: rgba(79, 134, 236, .4);
  --c-orange-bg: rgba(230, 130, 60, .15); --c-orange-fg: #f0b07e; --c-orange-line: rgba(230, 130, 60, .4);
  --c-purple-bg: rgba(150, 130, 200, .16); --c-purple-fg: #c4b6e6; --c-purple-line: rgba(150, 130, 200, .4);
  --c-pink-bg: rgba(210, 120, 160, .15);  --c-pink-fg: #e6aac4;
  --c-indigo-bg: rgba(120, 135, 210, .16); --c-indigo-fg: #b8c2ee;
  --v-a-bg: rgba(79, 134, 236, .26);   --v-a-fg: #b3ccfa;
  --v-us-bg: rgba(130, 130, 220, .26); --v-us-fg: #c3bdf2;
  --v-fu-bg: rgba(230, 130, 60, .26);  --v-fu-fg: #f2b787;
  --v-jm-bg: rgba(110, 160, 190, .26); --v-jm-fg: #b4d3e2;
  --v-lc-bg: rgba(63, 191, 160, .24);  --v-lc-fg: #9adcc7;
  --v-fg-bg: rgba(90, 160, 200, .26);  --v-fg-fg: #a9d3ec;
  --v-eg-bg: rgba(150, 130, 200, .26); --v-eg-fg: #cec2ee;
  --v-ma-bg: rgba(210, 120, 160, .26); --v-ma-fg: #edb8cd;
  --v-cj-bg: rgba(200, 120, 90, .26);  --v-cj-fg: #eec0a8;

  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
  --series-4: #c98500; --series-5: #d55181; --series-6: #9085e9;

  --side-bg: #131416;
  --side-fg: #b4b9c1;
  --side-fg-strong: #f0f1f3;
  --side-fg-dim: #7d838d;
  --side-line: #24262a;
  --side-hover: #1d1f22;
  --side-active: #26292e;
  --side-active-fg: #f0f1f3;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* 减少动态效果：动效时长归零 */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}