/* ============================================================= * 烽火轮 · 经营驾驶舱 设计令牌 (Design Tokens) — 单一真相源 * 依据：周星星《烽火轮经营驾驶舱 · UI 视觉规范》v1.0 (2026-07-13) * 基调：深色主（深海蓝）+ 浅色辅；数据可读性优先于品牌美观 * ============================================================= */ :root { /* ---------- 深色模式配色（默认主题） ---------- */ --fh-bg-primary: #0F1A3C; /* 深海蓝：主背景、侧边栏 */ --fh-bg-card: #162247; /* 深海蓝+10%：卡片/面板 */ --fh-bg-hover: #1E2D55; /* 深海蓝变体：悬浮/选中态 */ --fh-border: #2A3A6B; /* 深海蓝+15%：边框/分割线（仅用衍生色，金不用于边框） */ --fh-text-primary: #E8EAF0; /* 净白90%：主要文字/数字 */ --fh-text-secondary:#8A9BBF; /* 板灰蓝调：次要标签/轴标签/说明 */ --fh-gold: #C8A24E; /* 乾坤金：品牌/主按钮/选中竖条/图表系列第一色 */ --fh-blue: #4A90D9; /* 商务蓝亮：链接/图表第二色/可点击 */ --fh-success: #2ECC71; /* 成功/正向（增长、达标） */ --fh-warning: #F39C12; /* 警告/中性（接近阈值、待处理） */ --fh-danger: #C0392B; /* 点睛红：危险/负向（亏损、预警） */ /* ---------- 图表六色板（按优先级，单图≤3主色） ---------- */ --chart-1: #C8A24E; /* 主数据系列：乾坤金 */ --chart-2: #4A90D9; /* 第二系列：商务蓝亮 */ --chart-3: #2ECC71; /* 第三系列：成功绿 */ --chart-4: #9B59B6; /* 第四系列：薰衣草紫（≤5%） */ --chart-5: #E67E22; /* 第五系列：暖橙 */ --chart-6: #95A5A6; /* 备用：浅灰 */ /* ---------- 语义别名（业务代码统一引用） ---------- */ --accent-gold: var(--fh-gold); --accent-blue: var(--fh-blue); --accent-green: var(--fh-success); --accent-red: var(--fh-danger); --accent-yellow: var(--fh-warning); --accent-purple: var(--fh-gold); /* 紫非品牌色，统一收口为金 */ --accent-cyan: var(--fh-blue); /* 青非品牌色，收口为商务蓝 */ --accent-orange: var(--chart-5); --accent-pink: var(--fh-gold); /* 粉非品牌色，收口为金 */ --gradient-gold: var(--fh-gold); /* 原金色渐变→实心金（禁渐变） */ /* ---------- 间距 / 圆角 ---------- */ --fh-gap: 16px; /* 卡片间距 */ --fh-pad: 20px; /* 卡片内边距 */ --fh-content: 24px; /* 主内容区内边距 */ --fh-radius: 8px; /* 卡片/按钮圆角 */ --fh-radius-sm: 6px; /* 筛选器/标签圆角 */ /* ---------- 阴影（卡片立体感，深/浅双模各异，见下方主题覆盖） ---------- */ --fh-shadow-card: 0 2px 6px rgba(0, 0, 0, 0.25); /* 深色：对比已有层次，阴影仅补微弱分离 */ /* ---------- 按钮高度 ---------- */ --fh-btn-h: 36px; --fh-btn-h-sm:32px; --fh-btn-h-lg:44px; /* ---------- 字号层级（深色模式） ---------- */ --fh-fs-kpi: 56px; /* KPI 主数据 48~72，取中值 */ --fh-fs-title: 30px; /* 页面标题 28~32 */ --fh-fs-card: 19px; /* 卡片标题 18~20 */ --fh-fs-body: 15px; /* 正文数据 14~16 */ --fh-fs-label: 12px; /* 标签/轴名 12~13（不小于12） */ --fh-fs-cap: 11px; /* 辅助说明 11~12 */ /* ---------- 字体族（UI 用无衬线；思源黑/苹方免费可用，DIN 商用不可用） ---------- */ --fh-font: "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* 数字：等宽数字（tabular-nums），避免右对齐参差；不引入商用 DIN */ --fh-font-num: var(--fh-font); } /* 数字统一用等宽数字，财务报表右对齐更整齐（禁用宋体） */ .fh-num, .fh-money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-family: var(--fh-font-num); } /* ---------- 浅色模式（Phase D，2026-07-14 启用） ---------- */ /* 切换方式：；令牌全部继承，业务代码零改动。 页面若硬编码深色（#0F1A3C/#162247），靠下方 [data-theme="light"] 桥接层 用 !important 翻转到浅色画布/卡片；逐页改用令牌是后续精细化工作。 */ :root[data-theme="light"] { --fh-bg-primary: #F4F6FA; /* 浅灰蓝：主背景、侧边栏 */ --fh-bg-card: #FFFFFF; /* 实色白：浅色卡片基底（保持清爽实底，不做半透明） */ --fh-bg-hover: #EEF1F7; /* 浅悬浮 */ --fh-border: rgba(15, 26, 60, 0.10); /* 淡海军蓝边框：有层次、不抢眼 */ --fh-text-primary: #1A2238; /* 深海军字（非纯黑，护眼） */ --fh-text-secondary:#5A6B8C; /* 中灰蓝：次要文字 */ /* 浅底上需更高对比度，金/蓝/语义色整体压深一档 */ --fh-gold: #B5872B; /* 压深金：浅底可读 */ --fh-blue: #1F5FA8; /* 压深商务蓝 */ --fh-success: #1E9E54; /* 压深绿 */ --fh-warning: #C77B09; /* 压深琥珀 */ --fh-danger: #B5281B; /* 压深红 */ --chart-1: #B5872B; /* 金→压深 */ --chart-2: #1F5FA8; /* 蓝→压深 */ --chart-3: #1E9E54; /* 绿→压深 */ --chart-4: #8E44AD; /* 紫（浅底可读） */ --chart-5: #D2691E; /* 暖橙 */ --chart-6: #7F8C8D; /* 灰 */ /* 阴影：浅色白卡需明显抬升，用柔和海军蓝调（非纯黑，保持在品牌色系内） */ --fh-shadow-card: 0 2px 4px rgba(15, 26, 60, 0.05), 0 8px 24px rgba(15, 26, 60, 0.12); } /* 桥接层：翻转移硬码深色的页面画布与通用卡片（!important 压过页内