/* ============================================================ 007分析 · PC 重构 Design Tokens v1 (定稿 2026-07-22) 来源: /root/reference/UI定稿_2026-07-22/PC重构_DesignTokens_规范_v1.html 用法: :root = 默认皮肤(熔岩红·浅色); 换肤 ; 明暗 。组件 CSS 只准引用变量, 禁写死色值。 总则: 语义色跨皮肤不变且带符号(▲高遗漏/▽低遗漏/✓中出); 金色=价值专用; 主色只进操作件不进数据数值区; 数字 tabular-nums。 ============================================================ */ /* ---------- 默认 · 琥珀金 (amber · light, 2026-07-23 老大定) ---------- */ :root, [data-c="amber"] { --bg: #FFF2D9; --bg-img: linear-gradient(180deg, #FFF6E3 0%, #FFEBC2 100%); --surface: #FFFDF6; --surface-2: #FFF6E2; --surface-3: #FFEFD2; --surface-4: #F7E3BC; --border: #E9D3A6; --border-strong: #D9BC85; --text: #4A3413; --text-2: #8A7146; --text-3: #B39C6E; --p1: #FFB13B; --p2: #FF8A00; --p-edge: #D97600; --p-deep: #E07800; --p-weak: #FFF1D6; --on-p: #FFFFFF; --p-text: #E07800; --edge-soft: #EBD6A8; --gold1: #FFD84D; --gold2: #FFB300; --gold-edge: #D99400; --tree-a1: #FFB13B; --tree-a2: #FF8A00; --bar-fill: linear-gradient(90deg,#FFC24B,#FF8A00); --ball1: #FFE3AE; --ball2: #FFB13B; --ball3: #F08A00; --ball-text: #7A4A00; --ball-edge: #D97600; --header-bg: #FFFAF0; --notice-bg: #FFF1D6; --notice-text: #C46A00; } /* ---------- 熔岩红 ---------- */ [data-c="lava"] { --bg: #FFEDE2; --bg-img: linear-gradient(180deg, #FFF2E8 0%, #FFE2CE 100%); --surface: #FFFBF7; --surface-2: #FFF1E7; --surface-3: #FFE7D6; --surface-4: #F8D5BC; --border: #EFCBAE; --border-strong: #DFB08A; --text: #4A2413; --text-2: #92603F; --text-3: #BC9070; --p1: #FF7A50; --p2: #F04E23; --p-edge: #C23812; --p-deep: #E04418; --p-weak: #FFE9DD; --on-p: #FFFFFF; --p-text: #D8431A; --edge-soft: #F0CFB4; --gold1: #FFD84D; --gold2: #FFB300; --gold-edge: #D99400; --tree-a1: #FF7A50; --tree-a2: #F04E23; --bar-fill: linear-gradient(90deg,#FF9A5E,#F04E23); --ball1: #FFD9C4; --ball2: #FF8A5C; --ball3: #E85320; --ball-text: #7A2A0A; --ball-edge: #C23812; --header-bg: #FFF7F0; --notice-bg: #FFE9DD; --notice-text: #C23812; } /* ---------- 罗兰紫金 ---------- */ [data-c="violet"] { --bg: #F3EFFF; --bg-img: linear-gradient(180deg, #F8F5FF 0%, #EBE3FE 100%); --surface: #FFFEFB; --surface-2: #F6F2FF; --surface-3: #EEE7FD; --surface-4: #DED2F6; --border: #D9CCF2; --border-strong: #BCA8E4; --text: #322A4A; --text-2: #6C6190; --text-3: #9C92BC; --p1: #9D7BFF; --p2: #7C4DFF; --p-edge: #5E35CC; --p-deep: #6E3FF0; --p-weak: #F0E9FF; --on-p: #FFFFFF; --p-text: #6E3FF0; --edge-soft: #D8CBF0; --gold1: #FFD84D; --gold2: #FFB300; --gold-edge: #D99400; --tree-a1: #9D7BFF; --tree-a2: #7C4DFF; --bar-fill: linear-gradient(90deg,#B39AFF,#7C4DFF); --ball1: #E9DFFF; --ball2: #A98CFF; --ball3: #7C4DFF; --ball-text: #45278F; --ball-edge: #5E35CC; --header-bg: #FBF9FF; --notice-bg: #F0E9FF; --notice-text: #6E3FF0; } /* ---------- 翡翠金 ---------- */ [data-c="jade"] { --bg: #E9F9EF; --bg-img: linear-gradient(180deg, #F1FBF4 0%, #DDF4E5 100%); --surface: #FDFFFB; --surface-2: #EFF9F1; --surface-3: #E2F3E7; --surface-4: #C9E7D2; --border: #C6E4CE; --border-strong: #9FCFAD; --text: #1E3A2C; --text-2: #55755F; --text-3: #86A890; --p1: #3ED584; --p2: #12B76A; --p-edge: #0E8F54; --p-deep: #10A55F; --p-weak: #E4F7EC; --on-p: #FFFFFF; --p-text: #0E9558; --edge-soft: #C4E2CC; --gold1: #FFD84D; --gold2: #FFB300; --gold-edge: #D99400; --tree-a1: #3ED584; --tree-a2: #12B76A; --bar-fill: linear-gradient(90deg,#5CDF97,#12B76A); --ball1: #D7F5E2; --ball2: #4CD98C; --ball3: #12A55F; --ball-text: #0B5A36; --ball-edge: #0E8F54; --header-bg: #F7FDF8; --notice-bg: #E4F7EC; --notice-text: #0E8F54; } /* ---------- 共用: 字体 / 语义色 / 几何 (跨皮肤恒定) ---------- */ :root { --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif; --hit: #2FA84C; --hit-weak: #E4F7E7; /* 中出 ✓ 绿 */ --hot: #E8420E; --hot-weak: #FFE7DC; /* 高遗漏 ▲ 红 */ --cold: #2A87D0; --cold-weak: #E4F1FB; /* 低遗漏 ▽ 蓝 */ --warn: #C08A12; --warn-weak: #FCF2D3; /* 次级预警 */ --radius: 18px; --radius-sm: 12px; --row-py: 8px; --fs-table: 13px; /* 彩种类别色点 (高频五分/时时彩/哈希/传统低频) */ --cat-wf: #E8590C; --cat-ssc: #1971C2; --cat-hash: #9C36B5; --cat-low: #2F9E44; } /* ============================================================ 暗色主题: 同名 token 逐一映射, 组件零改 ============================================================ */ [data-mode="dark"] { --hit: #45C86A; --hit-weak: rgba(69,200,106,.16); --hot: #FF6B3D; --hot-weak: rgba(255,107,61,.16); --cold: #5BA8E8; --cold-weak: rgba(91,168,232,.16); --warn: #E0A62E; --warn-weak: rgba(224,166,46,.15); } [data-mode="dark"][data-c="lava"] { --bg: #261210; --bg-img: linear-gradient(180deg, #2C1712 0%, #1D0D08 100%); --surface: #38201A; --surface-2: #40261E; --surface-3: #482B22; --surface-4: #2E1913; --border: #553226; --border-strong: #6B3E2E; --text: #FBE9DF; --text-2: #D2A18E; --text-3: #93705F; --p-weak: rgba(240,78,35,.16); --p-text: #FF8A5C; --edge-soft: #160A06; --header-bg: #331C15; --notice-bg: #40261E; --notice-text: #FF8A5C; } [data-mode="dark"], [data-mode="dark"][data-c="amber"] { --bg: #241B10; --bg-img: linear-gradient(180deg, #2A2013 0%, #1E1509 100%); --surface: #332817; --surface-2: #3B2E1B; --surface-3: #42341F; --surface-4: #2A2012; --border: #4A3A22; --border-strong: #5C4A2C; --text: #F7EBD2; --text-2: #C9B48C; --text-3: #8F7D5A; --p-weak: rgba(255,138,0,.15); --p-text: #FFB13B; --edge-soft: #150F07; --header-bg: #2E2314; --notice-bg: #3B2E1B; --notice-text: #FFB13B; } [data-mode="dark"][data-c="violet"] { --bg: #1C1630; --bg-img: linear-gradient(180deg, #221A3A 0%, #141024 100%); --surface: #2A2145; --surface-2: #31274F; --surface-3: #382D59; --surface-4: #241C3D; --border: #443767; --border-strong: #55447E; --text: #EFE9FB; --text-2: #B4A8D6; --text-3: #7E729F; --p-weak: rgba(124,77,255,.18); --p-text: #B39AFF; --edge-soft: #0F0B1D; --header-bg: #251C3E; --notice-bg: #31274F; --notice-text: #B39AFF; } [data-mode="dark"][data-c="jade"] { --bg: #0F1F17; --bg-img: linear-gradient(180deg, #142519 0%, #0A1810 100%); --surface: #1B3025; --surface-2: #21382B; --surface-3: #274031; --surface-4: #16281E; --border: #2F4D3B; --border-strong: #3B5F49; --text: #E4F5E9; --text-2: #A3C7B0; --text-3: #6F937D; --p-weak: rgba(18,183,106,.17); --p-text: #3ED584; --edge-soft: #06110B; --header-bg: #172A20; --notice-bg: #21382B; --notice-text: #3ED584; } /* ---------- 暗色光影修正 (规范三节: 内高光减弱/环境影加深/内凹加深) ---------- */ [data-mode="dark"] .card { box-shadow: 0 5px 0 var(--edge-soft), inset 0 1.5px 0 rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.45); } [data-mode="dark"] .topbar { box-shadow: 0 3px 0 var(--edge-soft), inset 0 1.5px 0 rgba(255,255,255,.05); } [data-mode="dark"] thead th, [data-mode="dark"] tfoot td { text-shadow: none; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.06); } [data-mode="dark"] .top-notice { box-shadow: inset 0 2px 3px rgba(0,0,0,.4); } [data-mode="dark"] .tree-search input { box-shadow: inset 0 2px 3px rgba(0,0,0,.45); } [data-mode="dark"] .ratebar { box-shadow: inset 0 1.5px 2px rgba(0,0,0,.55); } [data-mode="dark"] .lot-panel { box-shadow: 0 5px 0 var(--edge-soft), 0 18px 44px rgba(0,0,0,.6); } [data-mode="dark"] .btn-ghost { color: var(--text-2); } [data-mode="dark"] .demo-badge { color: var(--text-3); }