/* ============================================================ theme-3.tokens.css — Theme 3 · Warm Amber (琥珀暖调) 版本: T3_GLOBAL_ROOT_THEME_FIX · 2026-04-18 主色: #d97706 (Amber 600) 页面底: #fffbf5 (暖米白) Hero 暗底 wash: #451a03 → #230d02 (深咖兜底) Header / Footer: 白 / 深咖 覆盖原则（与 theme-2.tokens.css 对齐）: - 仅覆盖与 T1 基线差异值；未列出的 token 自动从 tokens.base.css 继承 - 跨组件语义层（badge-、cta-、tag-、price-tag- 家族）通过 --color-primary 与 --color-text-on-* 等底层联动；T3 是浅底主题，--color-text-inverse 保持接近暖白即可，不需要像 T2 一样翻转 on-* 全家族 - 仅在出现"硬编码白/浅色"或"语义漂移"的点位增加 T3 专属覆盖 来源对照: - 主色系 / 文本 / 背景 / 边框 / overlay / 阴影 / glass / 渐变： 沿用旧 tokens.css [data-theme="3"] (lines 497–560) 的已拍板值 - text-on-* / 跨组件语义 token： 本文件主动补齐；T3 浅底 + 暖橙主色，沿用 base 默认即可 选择器升级（2026-04-18 T3_GLOBAL_ROOT_THEME_FIX）: Root-cause 证据链：A 在 T3 产品详情页 DevTools 取证发现 存在、theme-3.tokens.css 已加载、但 :root --color-primary 仍解析为 #0d9488 (T1) 而非 #d97706。 问题：原 [data-theme="3"] 与 tokens.base.css :root 同 specificity (0,0,1,0)，在 later-wins 失效的环境下 root 值无法被覆盖。 修法：ParserController 每次只分发一个 theme-N 文件，theme-3 改为 :root 可确保 tokens.base.css 基线被后加载的 theme-3 值稳定覆盖， cascade 语义转为 "source order later wins"，不再依赖属性选择器 博弈。 ============================================================ */ :root { /* ========== 主色系 ========== */ --color-primary: #d97706; --color-primary-hover: #b45309; --color-primary-active: #92400e; --color-primary-tint: #f59e0b; --color-primary-light: #fffbeb; --color-primary-lighter: #fefce8; --color-primary-dark: #78350f; /* rgb 分量 · R13-11A 修复 silent 漂移 · #d97706 */ --color-primary-rgb: 217, 119, 6; /* ========== 文本层 ========== */ --color-text: #1c0a00; --color-text-secondary: #57534e; --color-text-muted: #a8a29e; --color-text-inverse: #fff8f0; --color-secondary: #78716c; /* ========== 背景层 ========== */ --color-bg: #fffbf5; --color-bg-primary: #fffbf5; --color-bg-secondary: #fff7ed; --color-bg-tertiary: #ffedd5; --color-bg-quaternary: #fed7aa; --color-bg-dark: #451a03; --color-bg-darker: #230d02; --color-header-bg: #ffffff; --color-footer-bg: #451a03; --color-footer-text: #fde8c8; /* ========== 边框层 ========== */ --color-border: #f0d5b0; --color-border-light: #fef3e2; --color-border-dark: #e0b080; --color-border-focus: #d97706; --color-border-glow-primary: rgba(217, 119, 6, 0.3); /* ========== Overlay ========== */ --color-overlay: rgba(28, 10, 0, 0.6); --color-overlay-light: rgba(28, 10, 0, 0.3); --overlay-accent-10: rgba(217, 119, 6, 0.12); --overlay-primary-10: rgba(217, 119, 6, 0.1); --overlay-primary-15: rgba(217, 119, 6, 0.15); --overlay-primary-20: rgba(217, 119, 6, 0.2); --overlay-primary-30: rgba(217, 119, 6, 0.3); --overlay-primary-40: rgba(217, 119, 6, 0.4); --overlay-primary-50: rgba(217, 119, 6, 0.5); /* ========== 阴影 ========== */ --shadow-glow-primary: 0 8px 32px rgba(217, 119, 6, 0.2), 0 8px 32px rgba(217, 119, 6, 0.15); --shadow-focus: 0 0 0 3px rgba(217, 119, 6, 0.25); --shadow-card-hover: 0 4px 20px rgba(217, 119, 6, 0.12); /* ========== Glass / 渐变 ========== */ --glass-bg: rgba(255, 251, 245, 0.85); --color-gradient-radial: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(217, 119, 6, 0.30) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 20%, rgba(234, 88, 12, 0.20) 0%, transparent 50%), radial-gradient(ellipse 50% 50% at 50% 100%, rgba(180, 83, 9, 0.14) 0%, transparent 50%), linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%); --color-gradient-cta: linear-gradient(135deg, #d97706 0%, #b45309 100%); /* ============================================================ ★ 跨组件语义层 · T3 继承说明 T3 是"浅底 + 暖橙主色"结构，与 T1 同构。 下列语义 token 通过 base 层 lazy var() 自动联动，无需重复声明： --hero-tip-bg / border → base: overlay-white-* (白文字在深 Hero wash 上) --hero-badge-bg / border → base: overlay-primary-* (已随 --color-primary 变橙) --hero-trust-num-text → base: --color-text-on-dark (Hero wash 深咖上白字) --badge-primary-* → base: --color-primary + --color-text-on-primary --badge-danger/success/warning → base: 对应语义色 + --color-text-on-* --tag-active-* → base: --color-primary --price-tag-* → base: --color-gradient-primary --cta-primary-* → base: --color-primary + shadow-glow-primary --cta-secondary-* → base: --color-primary outline + light hover --alert-* → base: 语义色 family --panel-* → base: bg-section / bg-section-alt 对 T3 只有 --card-bg-elevated 需要思考：T3 浅底白卡，保持 base 默认 #ffffff 即可，不做覆盖。 ============================================================ */ /* ========== 圆角性格 · R13-11B 2026-04-21 ========== T3 Warm Amber · 软圆零售（16/8/12 主轴 · 当前生产主题） 注：card 从 base 12 → 16（R13-11 设计稿 §7.1 R-2 已审批） */ --radius-card: var(--radius-2xl); /* 16px */ --radius-btn: var(--radius-lg); /* 8px */ --radius-btn-lg: var(--radius-xl); /* 12px */ --radius-chip: var(--radius-full); /* pill */ --radius-input: var(--radius-lg); /* 8px */ --radius-image: var(--radius-xl); /* 12px */ --radius-hero: var(--radius-3xl); /* 24px */ --radius-modal: var(--radius-2xl); /* 16px */ }