/* ══════════════════════════════════════════════════════════ 润皓科技 RAISEINFO · 设计变量 tokens.css ────────────────────────────────────────────────────────── 两套独立开关，挂在 上： data-theme = "dark" | "light" 深浅模式 data-palette = "a" | "b" | "c" | "d" 配色方案 例： 换配色只需改 data-palette 一个字母，全站即时生效。 A 墨青（默认） · B 靛蓝暮紫 · C 石墨琥珀 · D 藏青 ── 对比度 ── 全部 8 组（4 套配色 × 深浅两模式）均经 WCAG 2.1 校验达标： 正文/标题 ≥ 4.5:1，弱化小字与大字强调 ≥ 3:1。 深色模式按钮用亮底 + 深色字（--on-brand），浅色模式用深底 + 白字。 修改任何色值后请重新跑对比度校验。 ══════════════════════════════════════════════════════════ */ /* ── 与配色无关的常量：字体 / 字号 / 间距 / 圆角 ── */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --font-num: "SF Mono", "Cascadia Mono", "Consolas", "Courier New", monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-h3: 22px; --fs-h2: clamp(26px, 3.2vw, 38px); --fs-h1: clamp(32px, 4.4vw, 54px); --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 72px; --sp-8: 104px; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-full: 999px; --maxw: 1200px; --nav-h: 72px; } /* ══════════════════════════════════════════════════════════ 配色 A · 墨青 —— 沉稳 · 制造业可信感 ══════════════════════════════════════════════════════════ */ /* A · 深色 */ [data-palette="a"][data-theme="dark"] { --bg-base: #0A1114; --bg-surface: #101A1D; --bg-card: #162226; --bg-raised: #1C2B30; --brand: #2DD4BF; --brand-dim: #14B8A6; --brand-soft: rgba(45, 212, 191, 0.10); --brand-glow: rgba(45, 212, 191, 0.26); --on-brand: #04211E; --accent: #5EEAD4; --text-hi: #E8F1F0; --text-md: #9CB0AD; --text-lo: #6D837E; --border: rgba(45, 212, 191, 0.14); --border-hi: rgba(45, 212, 191, 0.34); --line: rgba(255, 255, 255, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.34); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.46); } /* A · 浅色 */ [data-palette="a"][data-theme="light"] { --bg-base: #F6F8F8; --bg-surface: #EBF1F0; --bg-card: #FFFFFF; --bg-raised: #E1EAE8; --brand: #0F766E; --brand-dim: #115E59; --brand-soft: rgba(15, 118, 110, 0.08); --brand-glow: rgba(15, 118, 110, 0.20); --on-brand: #FFFFFF; --accent: #0D9488; --text-hi: #0F1B1A; --text-md: #4A5C58; --text-lo: #7A8B88; --border: rgba(15, 118, 110, 0.16); --border-hi: rgba(15, 118, 110, 0.34); --line: rgba(0, 0, 0, 0.07); --shadow-sm: 0 1px 3px rgba(15, 27, 26, 0.06); --shadow-md: 0 10px 28px rgba(15, 27, 26, 0.09); --shadow-lg: 0 24px 56px rgba(15, 27, 26, 0.13); } /* ══════════════════════════════════════════════════════════ 配色 B · 靛蓝暮紫 —— 技术 · 专业研发气质 ══════════════════════════════════════════════════════════ */ /* B · 深色 */ [data-palette="b"][data-theme="dark"] { --bg-base: #0B0D1A; --bg-surface: #111530; --bg-card: #1B1F42; --bg-raised: #232A57; --brand: #818CF8; --brand-dim: #6366F1; --brand-soft: rgba(129, 140, 248, 0.12); --brand-glow: rgba(129, 140, 248, 0.28); --on-brand: #12133A; --accent: #A78BFA; --text-hi: #EDEFFF; --text-md: #A6ACCF; --text-lo: #767DA6; --border: rgba(129, 140, 248, 0.18); --border-hi: rgba(129, 140, 248, 0.38); --line: rgba(255, 255, 255, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.36); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.48); } /* B · 浅色 */ [data-palette="b"][data-theme="light"] { --bg-base: #F5F6FC; --bg-surface: #EAECF8; --bg-card: #FFFFFF; --bg-raised: #DFE2F4; --brand: #4F46E5; --brand-dim: #4338CA; --brand-soft: rgba(79, 70, 229, 0.08); --brand-glow: rgba(79, 70, 229, 0.20); --on-brand: #FFFFFF; --accent: #6D28D9; --text-hi: #14162E; --text-md: #555C85; --text-lo: #7C82A8; --border: rgba(79, 70, 229, 0.16); --border-hi: rgba(79, 70, 229, 0.34); --line: rgba(0, 0, 0, 0.07); --shadow-sm: 0 1px 3px rgba(20, 22, 46, 0.06); --shadow-md: 0 10px 28px rgba(20, 22, 46, 0.09); --shadow-lg: 0 24px 56px rgba(20, 22, 46, 0.13); } /* ══════════════════════════════════════════════════════════ 配色 C · 石墨琥珀 —— 工艺 · 印刷玻璃共鸣 ══════════════════════════════════════════════════════════ */ /* C · 深色 */ [data-palette="c"][data-theme="dark"] { --bg-base: #12100E; --bg-surface: #1A1815; --bg-card: #262220; --bg-raised: #302B27; --brand: #FBBF24; --brand-dim: #F59E0B; --brand-soft: rgba(251, 191, 36, 0.12); --brand-glow: rgba(251, 191, 36, 0.26); --on-brand: #2A1A02; --accent: #FCD34D; --text-hi: #F7F3EF; --text-md: #B0A79E; --text-lo: #857C72; --border: rgba(251, 191, 36, 0.18); --border-hi: rgba(251, 191, 36, 0.38); --line: rgba(255, 255, 255, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.38); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.50); } /* C · 浅色 */ [data-palette="c"][data-theme="light"] { --bg-base: #FAF8F5; --bg-surface: #F2EDE6; --bg-card: #FFFFFF; --bg-raised: #E8E0D5; --brand: #B45309; --brand-dim: #92400E; --brand-soft: rgba(180, 83, 9, 0.08); --brand-glow: rgba(180, 83, 9, 0.20); --on-brand: #FFFFFF; --accent: #D97706; --text-hi: #1C1917; --text-md: #6B6259; --text-lo: #8A7F74; --border: rgba(180, 83, 9, 0.16); --border-hi: rgba(180, 83, 9, 0.34); --line: rgba(0, 0, 0, 0.07); --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06); --shadow-md: 0 10px 28px rgba(28, 25, 23, 0.09); --shadow-lg: 0 24px 56px rgba(28, 25, 23, 0.13); } /* ══════════════════════════════════════════════════════════ 配色 D · 藏青 —— 稳妥 · 政企医院通用 ══════════════════════════════════════════════════════════ */ /* D · 深色 */ [data-palette="d"][data-theme="dark"] { --bg-base: #0A1220; --bg-surface: #0F1A2E; --bg-card: #16243C; --bg-raised: #1E2E4C; --brand: #60A5FA; --brand-dim: #3B82F6; --brand-soft: rgba(96, 165, 250, 0.12); --brand-glow: rgba(96, 165, 250, 0.28); --on-brand: #06182F; --accent: #93C5FD; --text-hi: #EEF4FF; --text-md: #9FB0CA; --text-lo: #6E82A0; --border: rgba(96, 165, 250, 0.18); --border-hi: rgba(96, 165, 250, 0.38); --line: rgba(255, 255, 255, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.36); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.48); } /* D · 浅色 */ [data-palette="d"][data-theme="light"] { --bg-base: #F4F7FC; --bg-surface: #E8EEF8; --bg-card: #FFFFFF; --bg-raised: #DCE6F5; --brand: #1D4ED8; --brand-dim: #1E40AF; --brand-soft: rgba(29, 78, 216, 0.08); --brand-glow: rgba(29, 78, 216, 0.20); --on-brand: #FFFFFF; --accent: #2563EB; --text-hi: #0F1E36; --text-md: #55678A; --text-lo: #7E8CA6; --border: rgba(29, 78, 216, 0.16); --border-hi: rgba(29, 78, 216, 0.34); --line: rgba(0, 0, 0, 0.07); --shadow-sm: 0 1px 3px rgba(15, 30, 54, 0.06); --shadow-md: 0 10px 28px rgba(15, 30, 54, 0.09); --shadow-lg: 0 24px 56px rgba(15, 30, 54, 0.13); } /* ── 兜底：未指定 data-palette / data-theme 时按 A 深色渲染 ── */ :root { --bg-base: #0A1114; --bg-surface: #101A1D; --bg-card: #162226; --bg-raised: #1C2B30; --brand: #2DD4BF; --brand-dim: #14B8A6; --brand-soft: rgba(45, 212, 191, 0.10); --brand-glow: rgba(45, 212, 191, 0.26); --on-brand: #04211E; --accent: #5EEAD4; --text-hi: #E8F1F0; --text-md: #9CB0AD; --text-lo: #6D837E; --border: rgba(45, 212, 191, 0.14); --border-hi: rgba(45, 212, 191, 0.34); --line: rgba(255, 255, 255, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.34); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.46); }