/* ════════════════════════════════════════════════════════════════════════
JunQuant Design Tokens · v1.0 · 2026-04
共享配色系统, 全站所有 HTML 页面应通过 引入此文件
────────────────────────────────────────────────────────────────────────
★ 配色纪律 (A股语境)
红绿专属于"涨跌"语义, 任何其他元素都不得使用红绿。
品牌主色用暗金, 状态运行用专属亮绿(--ok), 分类用蓝/橙/cyan/purple。
全站除涨跌色和状态灯外, 不出现任何绿色家族色 (青绿/teal/sage 等都不行)。
详见 DESIGN_TOKENS.md
════════════════════════════════════════════════════════════════════════ */
:root {
/* ── 涨跌语义色 · 默认 A 股惯例 (红涨绿跌) ──
仅用于: 收益数字、柱状图、走势图、价格变动
通过 [data-market] 属性切换, 见下方 */
--up: #ef4444; /* 涨 - 红 */
--up-l: rgba(239,68,68,0.12);
--down: #10b981; /* 跌 - 绿 */
--down-l: rgba(16,185,129,0.12);
/* ── 主品牌色 · 暗金 (华尔街研报风) ── */
--brand: #d4a55c; /* Logo, Hero斜体, 已上线标签, 主CTA, roadmap当前阶段, 叙事重点数字 */
--brand-l: rgba(212,165,92,0.12);
--brand-hi: #e8bd7a; /* hover 提亮 */
/* ── 状态色 · 亮绿 (仅 navbar 状态灯, 全球工程师惯例) ── */
--ok: #00d97e; /* 唯一允许的"非涨跌绿" */
--ok-l: rgba(0,217,126,0.12);
/* ── 分类品牌色 (与涨跌无关, 永不切换) ── */
--blue: #4d9fff; /* ETF / 链接默认 / 信息 */
--blue-l: rgba(77,159,255,0.12);
--amber: #fb923c; /* SMC 小市值 (亮橙, 避免与暗金撞色) */
--amber-l:rgba(251,146,60,0.12);
--cyan: #06b6d4; /* CB 可转债 (替换原 teal, 离绿色家族最远) */
--cyan-l: rgba(6,182,212,0.12);
--cyan-hi:#38bdf8; /* hover 提亮 */
--purple: #a78bfa; /* FR 资金费率 */
--purple-l: rgba(167,139,250,0.12);
--purple-hi:#c4b5fd; /* hover 提亮 */
/* ── 通用警告色 (备用, 非涨跌) ── */
--red: #ff5c5c;
--red-l: rgba(255,92,92,0.1);
/* ── 文字与背景 ── */
--bg0: #080e16;
--bg1: #0f1923;
--bg2: #162030;
--t0: #eef3ff;
--t1: #9db8d4;
--t2: #7090ae;
--bdr: #1c2b3d;
--bdr2: #2a3d54;
/* ── 字体 ── */
--serif: "DM Serif Display", Georgia, serif;
--sans: "Inter", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
--mono: "JetBrains Mono", "SF Mono", "Cascadia Code", monospace;
/* ── 向后兼容别名 (新代码请直接用 --brand / --cyan) ── */
--green: var(--brand); /* 旧 --green 误用为品牌色, 现别名到暗金 */
--green-l: var(--brand-l);
--teal: var(--cyan); /* 旧 teal 现别名到 cyan */
--teal-l: var(--cyan-l);
--teal-hi: var(--cyan-hi);
}
/* ── 加密模式 (绿涨红跌, 加密圈惯例) ──
仅切换 --up / --down, 不动品牌色或分类色。
通过 触发, 或用户在 navbar 切换器选择。 */
:root[data-market="crypto"] {
--up: #10b981; /* 涨 - 绿 (加密惯例) */
--up-l: rgba(16,185,129,0.12);
--down: #ef4444; /* 跌 - 红 */
--down-l: rgba(239,68,68,0.12);
}
/* ════════════════════════════════════════════════════════════════════════
红绿模式切换器 (单按钮 · 点击切换)
HTML 结构:
A股
⇋
JS 自动绑定: 点击切换, label 文字随模式更新 (A股 ↔ 币圈)
════════════════════════════════════════════════════════════════════════ */
.mkt-switch {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--bg1);
border: 1px solid var(--bdr2);
border-radius: 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--t1);
cursor: pointer;
transition: all 0.15s;
letter-spacing: 0.04em;
user-select: none;
}
.mkt-switch:hover {
border-color: var(--brand);
color: var(--t0);
}
.mkt-switch-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--up); /* 自动随市场模式变色 (A股=红, 币圈=绿) */
flex-shrink: 0;
transition: background 0.2s;
}
.mkt-switch-arrow {
color: var(--t2);
font-size: 10px;
transition: color 0.15s;
}
.mkt-switch:hover .mkt-switch-arrow { color: var(--brand); }