/* ============================================================ 全站设计 Token（单一真相源） - 三套皮肤：chinese（:root 默认国风）/ tech（深空科技）/ classic（素笺古典） - 切换方式： - 约定：所有 C 端页面/组件只允许消费本文件的语义变量，禁止硬编码颜色 - 同名旧变量（--paper/--ink/--cinnabar 等）保留为别名，存量代码平滑过渡 - 同构：本文件无任何 Element/SPA 专属逻辑，后端 Thymeleaf 模板同样引用 ⚠️ backend/src/main/resources/static/css/tokens.css 为本文件的构建拷贝， 请勿直接编辑后端副本；源文件在 frontend/src/styles/themes/tokens.css ============================================================ */ /* ================= 国风 chinese（默认基线，值与历史一致） ================= */ :root { /* ---- 背景 ---- */ --bg-page: #f7f2e7; /* 页面宣纸底 */ --bg-page-rgb: 247 242 231;/* 页面底 RGB 通道（半透明遮罩/吸顶栏用） */ --bg-deep: #f0e8d6; /* 更深一档的区域底 */ --bg-card: #fffdf7; /* 卡片底 */ --bg-card-hover: #fff9ee; --bg-elevated: #fffdf7; /* 弹层/下拉/dialog 底 */ --bg-input: #fffdf7; /* 输入框底 */ --bg-soft: #f5eddc; /* 柔和强调底（引用块/标签/表头） */ --bg-code: #2b2620; /* 代码块深底（三主题均为深底） */ --text-on-code: #f0e6d2; /* 代码块浅字 */ --bg-mask: rgba(43, 38, 32, 0.45); /* ---- 文字 ---- */ --text-strong: #2b2620; /* 标题/正文最重 */ --text-base: #5c5347; /* 常规文字 */ --text-muted: #8a7f6d; /* 次要说明 */ --text-placeholder: #b3a892; --text-disabled: #c8bda6; --text-inverse: #fdf8ee; /* 深色品牌底上的反白文字 */ /* ---- 线条 ---- */ --border: #e2d8c3; --border-strong: #cfc2a6; --divider: #ece3d0; /* ---- 品牌 ---- */ --brand: #a63a2a; /* 朱砂 */ --brand-deep: #8c2f22; --brand-rgb: 166 58 42; /* 品牌色 RGB 通道（透明态用） */ --brand-soft: rgba(166, 58, 42, 0.08); /* 品牌浅底（hover/标签） */ --brand-contrast: #fdf8ee; --brand-solid: #a63a2a; /* 实心按钮底（与按钮文字配对保证对比度） */ --on-brand-solid: #fdf8ee; /* 实心按钮上的文字 */ /* ---- 语义色 ---- */ --success: #5f7d5b; --success-deep: #4c6549; --warning: #b98a3e; --danger: #a63a2a; --info: #8a7f6d; /* ---- 装饰色（书法/五行等固定语义装饰，不随皮肤反色） ---- */ --gold: #b98a3e; --gold-light: #d4af6a; --dai: #3d4f5f; --bamboo: #5f7d5b; /* ---- 米字格 ---- */ --grid-line: #c0392b; /* 格框/辅助线/拼音色 */ --grid-line-soft: rgba(192, 57, 43, 0.28); --grid-line-faint: rgba(192, 57, 43, 0.2); --grid-char: #2b2620; /* 格中汉字色 */ /* ---- 阴影/圆角 ---- */ --shadow-card: 0 2px 8px rgba(90, 70, 30, 0.08); --shadow-pop: 0 8px 28px rgba(90, 70, 30, 0.14); --radius-base: 6px; --radius-small: 4px; --radius-large: 12px; --radius-round: 20px; --font-song: "Songti SC", "STSong", "STZhongsong", "SimSun", "Noto Serif SC", serif; --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "FangSong", "Noto Serif SC", serif; --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif; /* ============ 旧变量别名（禁止新增引用，仅供存量代码过渡） ============ */ --paper: var(--bg-page); --paper-deep: var(--bg-deep); --paper-card: var(--bg-card); --ink: var(--text-strong); --ink-light: var(--text-base); --ink-faint: var(--text-muted); --cinnabar: var(--brand); --cinnabar-deep: var(--brand-deep); --cinnabar-light: #c05341; --line: var(--border); --primary-color: var(--brand); --success-color: var(--success); --warning-color: var(--warning); --danger-color: var(--danger); --info-color: var(--info); --text-primary: var(--text-strong); --text-regular: var(--text-base); --text-secondary: var(--text-muted); --border-light: var(--border); --border-lighter: var(--divider); --border-extra-light: #f3ecdc; --bg-color: var(--bg-card); --bg-color-page: var(--bg-page); --bg-color-overlay: rgba(247, 242, 231, 0.92); --shadow-base: var(--shadow-card); --shadow-dark: var(--shadow-pop); --border-radius-base: var(--radius-base); --border-radius-small: var(--radius-small); --border-radius-large: var(--radius-large); --border-radius-round: var(--radius-round); /* ============ Element Plus 映射（国风） ============ */ --el-color-primary: #a63a2a; --el-color-primary-light-3: #c06a58; --el-color-primary-light-5: #d29483; --el-color-primary-light-7: #e3bdb0; --el-color-primary-light-8: #ecd2c8; --el-color-primary-light-9: #f6e8e3; --el-color-primary-dark-2: #8c2f22; --el-color-success: #5f7d5b; --el-color-warning: #b98a3e; --el-color-danger: #a63a2a; --el-color-info: #8a7f6d; --el-border-color: #e2d8c3; --el-border-color-light: #e2d8c3; --el-border-color-lighter: #ece3d0; --el-border-color-extra-light: #f3ecdc; --el-border-color-hover: #cfc2a6; --el-text-color-primary: #2b2620; --el-text-color-regular: #5c5347; --el-text-color-secondary: #8a7f6d; --el-text-color-placeholder: #b3a892; --el-text-color-disabled: #c8bda6; --el-bg-color: #fffdf7; --el-bg-color-page: #f7f2e7; --el-bg-color-overlay: #fffdf7; --el-fill-color: #f5eede; --el-fill-color-light: #f8f3e7; --el-fill-color-lighter: #fbf7ee; --el-fill-color-blank: #fffdf7; --el-disabled-bg-color: #f3ecdc; --el-disabled-text-color: #c8bda6; --el-mask-color: rgba(43, 38, 32, 0.45); --el-overlay-color-lighter: rgba(43, 38, 32, 0.5); --el-border-radius-base: 6px; color-scheme: light; } /* ================= 科技风 tech：深空蓝紫 + 霓虹青 ================= */ [data-global-theme="tech"] { --bg-page: #0e1424; --bg-page-rgb: 14 20 36; --bg-deep: #16203a; --bg-card: #1b2745; --bg-card-hover: #22305a; --bg-elevated: #1b2745; --bg-input: #141d36; --bg-soft: #22305a; --bg-code: #0c1322; --text-on-code: #c9d8f5; --bg-mask: rgba(4, 8, 18, 0.62); --text-strong: #e8f0ff; --text-base: #a9bce0; --text-muted: #7d91bb; /* 加深：page 5.8:1 / card 4.67:1（原 #6f83ad 在卡片上仅 3.88:1） */ --text-placeholder: #66789f; --text-disabled: #4c5d82; --text-inverse: #ffffff; --border: #2b3a5e; --border-strong: #3d5080; --divider: #243251; --brand: #5b8cff; --brand-deep: #3868d8; --brand-rgb: 91 140 255; --brand-soft: rgba(91, 140, 255, 0.14); --brand-contrast: #ffffff; --brand-solid: #3f6fe0; /* 实心按钮底：霓虹蓝过亮，白字仅 3.16:1，故按钮用加深一档 */ --on-brand-solid: #ffffff; /* 白字 on #3f6fe0 = 4.6:1 */ --success: #34d399; --success-deep: #1f9d72; --warning: #fbbf24; --danger: #f87171; --info: #7d91bb; --gold: #8b5cf6; --gold-light: #a78bfa; --dai: #22d3ee; --bamboo: #34d399; --grid-line: #6ea8ff; --grid-line-soft: rgba(110, 168, 255, 0.3); --grid-line-faint: rgba(110, 168, 255, 0.22); --grid-char: #e8f0ff; --shadow-card: 0 2px 10px rgba(0, 180, 255, 0.12); --shadow-pop: 0 10px 32px rgba(0, 120, 255, 0.22); --radius-base: 10px; --radius-small: 6px; --radius-large: 16px; --radius-round: 999px; --font-song: "PingFang SC", "Segoe UI", "Helvetica Neue", sans-serif; --font-kai: "PingFang SC", "Segoe UI", sans-serif; --font-sans: "PingFang SC", "Segoe UI", "Helvetica Neue", sans-serif; --bg-color-overlay: rgba(14, 20, 36, 0.92); /* Element Plus 深色映射 */ --el-color-primary: #5b8cff; --el-color-primary-light-3: #7da4ff; --el-color-primary-light-5: #9ebdff; --el-color-primary-light-7: #c0d4ff; --el-color-primary-light-8: #d5e2ff; --el-color-primary-light-9: #1f2c4e; --el-color-primary-dark-2: #3868d8; --el-color-success: #34d399; --el-color-warning: #fbbf24; --el-color-danger: #f87171; --el-color-info: #7d91bb; --el-border-color: #2b3a5e; --el-border-color-light: #2b3a5e; --el-border-color-lighter: #243251; --el-border-color-extra-light: #1f2b46; --el-border-color-hover: #3d5080; --el-text-color-primary: #e8f0ff; --el-text-color-regular: #a9bce0; --el-text-color-secondary: #7d91bb; --el-text-color-placeholder: #66789f; --el-text-color-disabled: #4c5d82; --el-bg-color: #1b2745; --el-bg-color-page: #0e1424; --el-bg-color-overlay: #1b2745; --el-fill-color: #22305a; --el-fill-color-light: #263563; --el-fill-color-lighter: #1f2c4e; --el-fill-color-blank: #141d36; --el-disabled-bg-color: #1f2b46; --el-disabled-text-color: #4c5d82; --el-mask-color: rgba(4, 8, 18, 0.7); --el-overlay-color-lighter: rgba(4, 8, 18, 0.62); color-scheme: dark; } /* ================= 古典风 classic：素笺水墨 + 青黛 ================= */ [data-global-theme="classic"] { --bg-page: #f4f1e8; --bg-page-rgb: 244 241 232; --bg-deep: #eae4d4; --bg-card: #fbf9f2; --bg-card-hover: #f6f2e6; --bg-elevated: #fbf9f2; --bg-input: #fbf9f2; --bg-soft: #efe9d8; --bg-code: #2e2a22; --text-on-code: #ece4d0; --bg-mask: rgba(51, 48, 42, 0.4); --text-strong: #33302a; --text-base: #635d50; --text-muted: #756d5c; /* 加深至 page 4.54:1 / card 4.86:1（原 #918976 仅 3.08:1） */ --text-placeholder: #b0a890; --text-disabled: #c4bca8; --text-inverse: #faf6ec; --border: #ddd5c0; --border-strong: #c4baa0; --divider: #e6dfcc; --brand: #8c4a3a; --brand-deep: #713a2d; --brand-rgb: 140 74 58; --brand-soft: rgba(140, 74, 58, 0.08); --brand-contrast: #faf6ec; --brand-solid: #8c4a3a; --on-brand-solid: #faf6ec; --success: #6b7d5a; --success-deep: #566648; --warning: #9a7b45; --danger: #8c4a3a; --info: #756d5c; --gold: #9a7b45; --gold-light: #b9a06a; --dai: #4a5c66; --bamboo: #6b7d5a; --grid-line: #8c4a3a; --grid-line-soft: rgba(140, 74, 58, 0.28); --grid-line-faint: rgba(140, 74, 58, 0.2); --grid-char: #33302a; --shadow-card: 0 1px 4px rgba(80, 70, 45, 0.08); --shadow-pop: 0 6px 20px rgba(80, 70, 45, 0.12); --radius-base: 6px; --radius-small: 4px; --radius-large: 12px; --radius-round: 20px; --font-song: "STKaiti", "Kaiti SC", "KaiTi", "STSong", "SimSun", "Noto Serif SC", serif; --font-kai: "STKaiti", "Kaiti SC", "KaiTi", "Noto Serif SC", serif; --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif; --bg-color-overlay: rgba(244, 241, 232, 0.94); --el-color-primary: #8c4a3a; --el-color-primary-light-3: #ad7365; --el-color-primary-light-5: #c49b8f; --el-color-primary-light-7: #dac3bb; --el-color-primary-light-8: #e6d6d0; --el-color-primary-light-9: #f1e9e6; --el-color-primary-dark-2: #713a2d; --el-color-info: #756d5c; --el-border-color: #ddd5c0; --el-border-color-light: #ddd5c0; --el-border-color-lighter: #e6dfcc; --el-border-color-extra-light: #efe9da; --el-border-color-hover: #c4baa0; --el-text-color-primary: #33302a; --el-text-color-regular: #635d50; --el-text-color-secondary: #756d5c; --el-text-color-placeholder: #b0a890; --el-text-color-disabled: #c4bca8; --el-bg-color: #fbf9f2; --el-bg-color-page: #f4f1e8; --el-bg-color-overlay: #fbf9f2; --el-fill-color: #f1ece0; --el-fill-color-light: #f4f0e6; --el-fill-color-lighter: #f7f4ec; --el-fill-color-blank: #fbf9f2; --el-disabled-bg-color: #efe9da; --el-disabled-text-color: #c4bca8; --el-mask-color: rgba(51, 48, 42, 0.4); --el-overlay-color-lighter: rgba(51, 48, 42, 0.45); color-scheme: light; }