/* ============================================================ 知行可视 · 设计系统令牌（single source of truth） 主基调：暗场深色。配色：青瓷 teal + 古籍 gold。 两档气质共用一套令牌： · 稳健工作台 = 默认（本文件的 :root 值） · 展陈惊艳 = 在容器上加 .zx-wow，放大辉光/动效/主色亮度 可选浅色主题： 或系统浅色。 引用：任意页面 ， 组件一律走 var(--zx-*)，不要再写死颜色。 ============================================================ */ :root { /* —— 字体 —— */ --zx-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; --zx-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* —— 中性阶（冷偏蓝的近黑，被选择过的中性）—— */ --zx-ink: #0A0D13; /* 页面底 */ --zx-surface: #12161F; /* 卡片/面板 */ --zx-raised: #1A1F2B; /* 抬升面/表头 */ --zx-overlay: #212736; /* 悬浮/hover */ --zx-line: #29303F; /* 描边 */ --zx-line-soft:#1F2532; /* 弱分隔 */ --zx-text: #E9EEF6; /* 主文字 */ --zx-text-2: #A7B3C6; /* 次文字 */ --zx-muted: #758096; /* 弱文字/占位 */ /* —— 主色：青瓷 teal + 古籍 gold —— */ --zx-accent: #38BDC8; --zx-accent-d: #2A99A3; --zx-accent-ghost: rgba(56,189,200,.12); --zx-on-accent:#04191B; /* 主色上的文字（近黑，保证对比） */ --zx-gold: #E0A64B; --zx-gold-ghost: rgba(224,166,75,.14); /* —— 语义色（与主色分离，只表状态）—— */ --zx-good: #4FB47C; --zx-good-ghost: rgba(79,180,124,.14); --zx-warn: #EBB255; --zx-warn-ghost: rgba(235,178,85,.14); --zx-crit: #E5675E; --zx-crit-ghost: rgba(229,103,94,.14); --zx-info: #4C93E0; --zx-info-ghost: rgba(76,147,224,.14); /* —— 数据分类色板：图谱类型 / 气泡分组 / 图表系列，全平台共用 —— */ --zx-c1:#38BDC8; --zx-c2:#E0A64B; --zx-c3:#E5675E; --zx-c4:#9B7BE0; --zx-c5:#4C93E0; --zx-c6:#6FBF8E; --zx-c7:#E07AA8; --zx-c8:#8592A8; /* —— 高度 / 圆角 / 间距 / 动效 —— */ --zx-shadow-1: 0 1px 2px rgba(0,0,0,.4); --zx-shadow-2: 0 8px 24px rgba(0,0,0,.45); --zx-shadow-3: 0 24px 60px rgba(0,0,0,.55); --zx-glow: 0 0 0 1px rgba(56,189,200,.22), 0 10px 34px rgba(56,189,200,.14); --zx-r1:7px; --zx-r2:11px; --zx-r3:16px; --zx-rp:999px; --zx-s1:4px; --zx-s2:8px; --zx-s3:12px; --zx-s4:16px; --zx-s5:24px; --zx-s6:32px; --zx-s7:48px; --zx-s8:72px; --zx-ease: cubic-bezier(.4,0,.2,1); --zx-dur-1: .16s; --zx-dur-2: .28s; } /* —— 浅色派生（同一套令牌；跟随系统或 data-theme="light"）—— */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --zx-ink:#F2F5F8; --zx-surface:#FFFFFF; --zx-raised:#FBFCFE; --zx-overlay:#EEF3F8; --zx-line:#DCE3EC; --zx-line-soft:#E7ECF3; --zx-text:#141A24; --zx-text-2:#3E4A5C; --zx-muted:#6B7688; --zx-accent:#0E9AA6; --zx-accent-d:#0B7C86; --zx-accent-ghost:rgba(14,154,166,.10); --zx-on-accent:#FFFFFF; --zx-gold:#B7791F; --zx-gold-ghost:rgba(183,121,31,.12); --zx-good:#2F8F5B; --zx-warn:#B0781A; --zx-crit:#C74A42; --zx-info:#2E72C4; --zx-c1:#0E9AA6; --zx-c2:#C0871F; --zx-c3:#CF5148; --zx-c4:#7B5AD0; --zx-c5:#2E72C4; --zx-c6:#3E9E6A; --zx-c7:#C55A8C; --zx-c8:#6A7688; --zx-shadow-1:0 1px 2px rgba(20,26,36,.06); --zx-shadow-2:0 10px 26px rgba(20,26,36,.10); --zx-shadow-3:0 24px 56px rgba(20,26,36,.14); --zx-glow:0 0 0 1px rgba(14,154,166,.2),0 10px 30px rgba(14,154,166,.12); } } :root[data-theme="light"] { --zx-ink:#F2F5F8; --zx-surface:#FFFFFF; --zx-raised:#FBFCFE; --zx-overlay:#EEF3F8; --zx-line:#DCE3EC; --zx-line-soft:#E7ECF3; --zx-text:#141A24; --zx-text-2:#3E4A5C; --zx-muted:#6B7688; --zx-accent:#0E9AA6; --zx-accent-d:#0B7C86; --zx-accent-ghost:rgba(14,154,166,.10); --zx-on-accent:#FFFFFF; --zx-gold:#B7791F; --zx-gold-ghost:rgba(183,121,31,.12); --zx-good:#2F8F5B; --zx-warn:#B0781A; --zx-crit:#C74A42; --zx-info:#2E72C4; --zx-c1:#0E9AA6; --zx-c2:#C0871F; --zx-c3:#CF5148; --zx-c4:#7B5AD0; --zx-c5:#2E72C4; --zx-c6:#3E9E6A; --zx-c7:#C55A8C; --zx-c8:#6A7688; --zx-shadow-1:0 1px 2px rgba(20,26,36,.06); --zx-shadow-2:0 10px 26px rgba(20,26,36,.10); --zx-shadow-3:0 24px 56px rgba(20,26,36,.14); --zx-glow:0 0 0 1px rgba(14,154,166,.2),0 10px 30px rgba(14,154,166,.12); } /* —— 展陈惊艳：在画布/容器加 .zx-wow —— 放大主色亮度、辉光与动效强度 —— */ .zx-wow { --zx-ink:#05070C; --zx-surface:#0B0F18; --zx-raised:#141A26; --zx-accent:#3FE0DB; --zx-gold:#F2B85C; --zx-glow: 0 0 0 1px rgba(63,224,219,.4), 0 14px 54px rgba(63,224,219,.28); } @media (prefers-reduced-motion: reduce) { :root { --zx-dur-1: 0s; --zx-dur-2: 0s; } }