/* ============================================================================ 瑞游旅行 · 主题预设 ---------------------------------------------------------------------------- 本文件手工维护。tokens.css 由 tokens.json 生成，请勿直接编辑。 工作原理 tokens.css 定义语义层（--color-brand / --color-accent / --color-surface-* …） 本文件只覆盖语义层中「与主题相关」的部分。因此切换主题 不需要改任何组件 CSS，也不需要改 HTML 结构。 每套预设都是完整自洽的配色方向（品牌色整体切换），不是「换一半」。 内容分区色（--color-section-*，七类正文分区的语义配色）刻意不随主题变化， 因为它们对应内容类型，不属于品牌识别。 如何切换到某一套（三选一，都不需要构建） 1) 把该预设块里的值粘到下面「当前生效主题」的 :root 块 —— 改 1 个文件 2) 在所有页面 上加 data-theme="terracotta" —— 一次脚本批量改 3) 保持现状不动 = default，与改造前逐像素一致 对比度声明均由实测得出（WCAG AA：正文 ≥ 4.5:1，大字 ≥ 3:1）。 ============================================================================ */ /* --------------------------------------------------------------------------- 当前生效主题：default（现状） 留空 = 沿用 tokens.css 原始值，与改造前完全一致。 要启用某套预设，把它的值复制进来即可。 --------------------------------------------------------------------------- */ :root { /* 当前：default —— 企业蓝 + 琥珀 */ } /* --------------------------------------------------------------------------- 旧令牌兼容层 站点历史上有若干变量名只在部分页面被定义过，另一些页面直接引用它们 （例如 var(--line)、var(--muted)），导致这些属性解析为空、边框与文字色丢失。 这里统一给出定义，使所有引用都能解析；已在本页自定义过同名变量的页面 不受影响（内联样式位于本文件之后，同名定义优先级更高）。 --------------------------------------------------------------------------- */ :root { --line: var(--color-border); --muted: var(--color-text-secondary); --warm-400: var(--color-text-subtle); --text-3: var(--color-text-muted); --color-surface: var(--color-surface-card); } /* =========================================================================== 预设 A · terracotta —— 暖色主调 品牌色由企业蓝改为赤陶橙，强调色用深青绿做冷暖对比，避免同色系互抢。 感知变化最直接，同时保留深海军蓝作为信任骨架。 实测对比度 --color-text-on-dark(#FFFFFF) on --color-brand(#C2410C) = 5.18:1 ✓ --color-link(#9A3412) on --color-surface-page(#F8F7F4) = 6.82:1 ✓ --color-accent-fg(#FFFFFF) on --color-accent(#0F6E63) = 6.12:1 ✓ --color-brand(#C2410C) on --color-surface-card(#FFFFFF) = 5.18:1 ✓ =========================================================================== */ :root[data-theme="terracotta"] { --color-brand: #C2410C; --color-brand-strong: #9A3412; --color-brand-cta: #C2410C; --color-brand-soft: #F0BFA6; --color-brand-soft-2: #E39A76; --color-link: #9A3412; --color-surface-brand-soft: #FBEFE7; --color-focus-ring: #E39A76; --color-accent: #0F6E63; --color-accent-line: #0F6E63; --color-accent-deep: #0B554C; --color-accent-strong: #0B554C; --color-accent-soft: #7FC3B7; --color-accent-fg: #FFFFFF; --color-accent-fg-deep: #FFFFFF; --color-surface-accent-soft: #E6F2F0; --color-overlay-brand-glow: rgba(194,65,12,.20); --color-overlay-brand-glow-2: rgba(194,65,12,.16); --color-overlay-brand-tint: rgba(194,65,12,.16); --color-overlay-amber-glow: rgba(15,110,99,.14); --color-overlay-amber-tint: rgba(15,110,99,.16); } /* =========================================================================== 预设 B · pine —— 冷色主调（山林 / 户外取向） 品牌色由企业蓝改为深青绿，强调色用暖砂棕。整体更贴近自然探索类旅行。 实测对比度 --color-text-on-dark(#FFFFFF) on --color-brand(#14655C) = 6.89:1 ✓ --color-link(#0F5A52) on --color-surface-page(#F8F7F4) = 7.53:1 ✓ --color-accent-fg(#FFFFFF) on --color-accent(#B4560F) = 4.91:1 ✓ =========================================================================== */ :root[data-theme="pine"] { --color-brand: #14655C; --color-brand-strong: #0F5049; --color-brand-cta: #14655C; --color-brand-soft: #A8D5CE; --color-brand-soft-2: #79BDB3; --color-link: #0F5A52; --color-surface-brand-soft: #E3F1EE; --color-focus-ring: #79BDB3; --color-accent: #B4560F; --color-accent-line: #B4560F; --color-accent-deep: #8A4210; --color-accent-strong: #8A4210; --color-accent-soft: #E0A473; --color-accent-fg: #FFFFFF; --color-accent-fg-deep: #FFFFFF; --color-surface-accent-soft: #FBF0E6; --color-overlay-brand-glow: rgba(20,101,92,.22); --color-overlay-brand-glow-2: rgba(20,101,92,.18); --color-overlay-brand-tint: rgba(20,101,92,.18); } /* =========================================================================== 预设 C · sand —— 低饱和（阅读优先） 主色降饱和并偏灰蓝，页面底色转为沙岩暖调，强调色为沙金。 整体更安静，接近纸质旅行读物的观感，弱化营销气。 实测对比度 --color-text-on-dark(#FFFFFF) on --color-brand(#2F6E8C) = 5.63:1 ✓ --color-link(#1F5C7A) on --color-surface-page(#F7F4EE) = 6.67:1 ✓ --color-accent-fg(#3A2408) on --color-accent(#E09A45) = 6.18:1 ✓ --color-text-primary(#1A1A18) on --color-surface-page(#F7F4EE) = 15.88:1 ✓ =========================================================================== */ :root[data-theme="sand"] { --color-surface-page: #F7F4EE; --color-surface-subtle: #FDFCFA; --color-surface-muted: #F2EDE4; --color-surface-header: #F5F1E9; --color-border: #D6CEBF; --color-border-subtle: #E7E0D4; --color-brand: #2F6E8C; --color-brand-strong: #1F5C7A; --color-brand-cta: #2F6E8C; --color-brand-soft: #A9C9D8; --color-brand-soft-2: #7FAEC4; --color-link: #1F5C7A; --color-surface-brand-soft: #E7F0F4; --color-focus-ring: #7FAEC4; --color-accent: #E09A45; --color-accent-line: #E09A45; --color-accent-deep: #A96A21; --color-accent-strong: #8A5717; --color-accent-soft: #F0C48C; --color-accent-fg: #3A2408; --color-accent-fg-deep: #3A2408; --color-surface-accent-soft: #FAF1E2; }