/* ============================================================ SICI 设计令牌 · 唯一事实源 配色方案 v5「科技飞升」—— 冷色调主导 + 数据色点缀。 日课（亮，默认）= 冷调浅灰蓝 #F0F4F8 + 青蓝 #0891B2 + 靛蓝 #6366F1 夜修（暗）= 深空蓝 #0B1120 + 青蓝/靛蓝/金光 演出层 = 恒暗黑（#030509 + 玄青气场 + 银朱碎片 + 顿悟金光） 双模式经 切换。 页面与组件禁止硬编码色值（演出层 boss.js 走 --stage-* 专用变量）。 ============================================================ */ :root { /* ---- 字体（系统字体栈，file:// 与离线可用） ---- */ --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; --font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace; /* ---- 字号阶梯（4 级正文层级） ---- */ --fs-hero: clamp(2rem, 5vw, 3rem); --fs-title: clamp(1.4rem, 3vw, 1.9rem); --fs-sub: 1.125rem; --fs-body: 1.0625rem; --fs-small: 0.875rem; /* ---- 间距阶梯 ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; /* ---- 圆角 ---- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; /* ---- 动效 ---- */ --dur-fast: 150ms; --dur-mid: 260ms; --dur-slow: 600ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- 布局 ---- */ --content-w: 44rem; /* 叙事正文（narr / narr-box / insight / dlg） */ --content-w-stage: 52rem; /* 交互区（stage / choice-grid / glass-panel.wide） */ --content-w-wide: 72rem; /* 全宽容器（wrap / map / gate-sects） */ --nav-h: 56px; /* ---- 响应式断点（文档标准，@media 中硬编码值） ---- bp-sm 640px 手机大屏 / 小平板竖屏 bp-md 768px 平板横屏 bp-lg 1024px 笔记本 bp-xl 1280px 桌面大屏 ---- */ /* ---- 科技飞升·原料色（不随模式变，演出层与 3D 层取色用） ---- */ --tech-cyan: #0891B2; --tech-cyan-light: #06B6D4; --tech-indigo: #6366F1; --tech-violet: #7C3AED; --tech-gold: #E0A845; --tech-danger: #E05848; --tech-emerald: #10B981; --tech-slate: #1E293B; /* ---- 境界五色（全站唯一映射：境界 = 进度/归属） ---- 炼气期 = 青蓝 · 筑基期 = 靛蓝 · 结丹期 = 紫 · 元婴期 = 金 · 化神期 = 翠绿 章节覆写 --accent 系列时统一引用 var(--realm-N)，禁止硬编码 hex ---- */ --realm-1: #0891B2; /* 炼气期 · 青蓝（初生、清澈） */ --realm-2: #6366F1; /* 筑基期 · 靛蓝（稳固、理性） */ --realm-3: #7C3AED; /* 结丹期 · 紫（凝聚、蜕变） */ --realm-4: #E0A845; /* 元婴期 · 金（神识、珍贵） */ --realm-5: #10B981; /* 化神期 · 翠绿（超越、生机） */ /* ---- v5 装饰层令牌 ---- */ --dot-matrix-color: rgba(8, 145, 178, 0.04); --dot-matrix-size: 36px; --circuit-line-color: rgba(99, 102, 241, 0.06); --scan-line-color: rgba(6, 182, 212, 0.04); --data-flow-color: rgba(8, 145, 178, 0.15); /* ---- 章节级语义变量（默认值，各章可覆写） ---- --calc* 计算/读数色（默认回退金） --ch-boss* Boss/天劫对立色（默认回退 danger） --ch-amber 警示/过渡色（默认回退 gold） --ch-epiphany* 顿悟色（默认回退 gold） --ch-ok / --ch-warn 答题正误色 ---- */ --calc: var(--gold); --calc-ink: var(--gold-ink); --calc-soft: var(--gold-soft); --ch-boss: var(--danger); --ch-boss-ink: var(--danger-ink); --ch-boss-soft: var(--danger-soft); --ch-boss-line: var(--danger); --ch-amber: var(--gold); --ch-epiphany: var(--gold); --ch-epiphany-ink: var(--gold-ink); --ch-epiphany-soft: var(--gold-soft); --ch-ok: var(--color-correct); --ch-warn: var(--danger); } /* ================= 日课（亮，默认）· 科技飞升 ================= */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #F0F4F8; --bg-elev: #FFFFFF; --bg-sunk: #E8EDF3; --text-1: #1E293B; --text-2: #475569; --text-3: #94A3B8; --line: rgba(30, 41, 59, 0.10); --line-strong: rgba(30, 41, 59, 0.22); --accent: #0891B2; --accent-ink: #0E7490; --accent-soft: rgba(8, 145, 178, 0.08); --info: #6366F1; --info-ink: #4F46E5; --info-soft: rgba(99, 102, 241, 0.08); --gold: #E0A845; --gold-ink: #92700E; --gold-soft: rgba(224, 168, 69, 0.10); --danger: #E05848; --danger-ink: #B91C1C; --danger-soft: rgba(224, 88, 72, 0.10); --on-accent: #FFFFFF; --color-correct: #059669; --color-error: #B91C1C; --color-insight: #92700E; --glass: rgba(255, 255, 255, 0.72); --glass-bg: rgba(255, 255, 255, 0.72); --glass-line: rgba(8, 145, 178, 0.18); --glass-strong: rgba(255, 255, 255, 0.92); --shadow: 0 4px 20px rgba(30, 41, 59, 0.06); --glow: 0 0 18px rgba(6, 182, 212, 0.22); --scene-veil: rgba(240, 244, 248, 0.0); --particle-dim: 0.38; --bg3d-fog: #F0F4F8; --bg3d-particle: #94A3B8; --bg3d-key: #0891B2; --bg3d-rim: #6366F1; --bg3d-atom: #06B6D4; } /* ================= 夜修（暗）· 科技飞升 ================= */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0B1120; --bg-elev: #131C31; --bg-sunk: #060A14; --text-1: rgba(226, 232, 240, 0.92); --text-2: rgba(148, 163, 184, 0.65); --text-3: rgba(148, 163, 184, 0.40); --line: rgba(148, 163, 184, 0.12); --line-strong: rgba(148, 163, 184, 0.26); --accent: #06B6D4; --accent-ink: #22D3EE; --accent-soft: rgba(6, 182, 212, 0.14); --info: #818CF8; --info-ink: #A5B4FC; --info-soft: rgba(129, 140, 248, 0.12); --gold: #E0A845; --gold-ink: #F0C768; --gold-soft: rgba(224, 168, 69, 0.12); --danger: #F27A63; --danger-ink: #F8917A; --danger-soft: rgba(242, 122, 99, 0.14); --on-accent: #04120F; --color-correct: #10B981; --color-error: #F27A63; --color-insight: #F0C768; --glass: rgba(19, 28, 49, 0.72); --glass-bg: rgba(19, 28, 49, 0.72); --glass-line: rgba(6, 182, 212, 0.16); --glass-strong: rgba(19, 28, 49, 0.90); --shadow: 0 8px 32px rgba(0, 0, 0, 0.5); --glow: 0 0 22px rgba(6, 182, 212, 0.30); --scene-veil: rgba(11, 17, 32, 0.0); --particle-dim: 1; --bg3d-fog: #0B1120; --bg3d-particle: #22D3EE; --bg3d-key: #06B6D4; --bg3d-rim: #818CF8; --bg3d-atom: #67E8F9; } /* ================= 演出层（Boss/顿悟覆盖层，恒暗黑） ================= */ .stage-dark, .boss-overlay { color-scheme: dark; --bg: #030509; --bg-elev: #0A0F1C; --bg-sunk: #010204; --text-1: rgba(226, 232, 240, 0.92); --text-2: rgba(148, 163, 184, 0.62); --text-3: rgba(148, 163, 184, 0.40); --line: rgba(148, 163, 184, 0.14); --line-strong: rgba(148, 163, 184, 0.30); --accent: #06B6D4; --accent-ink: #22D3EE; --accent-soft: rgba(6, 182, 212, 0.18); --info: #818CF8; --info-ink: #A5B4FC; --info-soft: rgba(129, 140, 248, 0.16); --gold: #E0A845; --gold-ink: #F0C768; --gold-soft: rgba(224, 168, 69, 0.16); --danger: #F27A63; --danger-ink: #F8917A; --danger-soft: rgba(242, 122, 99, 0.16); --on-accent: #04120F; --color-correct: #10B981; --color-error: #F27A63; --color-insight: #F0C768; --glass: rgba(10, 15, 28, 0.72); --glass-bg: rgba(10, 15, 28, 0.72); --glass-line: rgba(148, 163, 184, 0.12); --glass-strong: rgba(10, 15, 28, 0.92); --shadow: 0 8px 40px rgba(0, 0, 0, 0.6); --glow: 0 0 26px rgba(6, 182, 212, 0.30); --particle-dim: 1; --stage-bg: #030509; --stage-aura: #6366F1; --stage-aura-soft: rgba(99, 102, 241, 0.45); --stage-aura-strong: rgba(99, 102, 241, 0.75); --stage-aura-face: rgba(99, 102, 241, 0.55); --stage-shard: #F27A63; --stage-beam: #E0A845; --stage-xiangye: #F0C768; }