/* ============================================================ theme-8.tokens.css — Theme 8 · Noir Gold (墨金) 版本: T8_NOIR_GOLD_V1 · 2026-04-19 定位: 深底奢华 · 奥利奥风 · 典藏 / 法律事务所 / 高端定制 主色: #d4af37 (Antique Gold · 古金色) 页面底: #0a0a0a (近纯黑, 微带暖棕调) Header: #050505 (比正文底再深一档, 近全黑) Footer: #000000 (true black, 奢华沉底) Hero: 四色 hex 斜渡, 顶左 金光晕 → 底右 真黑 CTA: 三色金属光泽渐变 (e8c968 → d4af37 → b8941f) 与其它深底主题的区分: - T2 Ledger Dark #2563eb · 深蓝黑 #111827, 冷专业 - T6 Sunset Ember #f97316 · 暖棕黑 #1a0a05, 热烈转化 - T8 Noir Gold #d4af37 · 纯黑 #0a0a0a, 奢华典藏 T8 的辨识位: 纯黑底 + 金属主色 + 金色 Footer 字, 毫无暖棕/冷蓝杂色 —— 单主色硬规则 (V2 收紧) ———————————————————————————————— 本主题仅使用 Gold 家族作为强调色。 严禁引入银 / 铜 / 青 / 紫 等任何第二种金属或装饰色。 强调 / 徽章 / 提示 / 链接悬停 / 边框亮度 / 阴影色 一律从 --color-primary 家族 + --overlay-primary-* 透明度家族取。 注: secondary / muted 级的中性灰不算"强调位", 允许走 zinc 中性色 ————————————————————————————————————————————————————— —— 全主题 · 禁用大面积半透明背景硬规则 ———————————————— Surface 级背景禁止 rgba(r,g,b,<1) / backdrop-filter 组合。 详细白名单见 04_主题适配.md §3.5 ————————————————————————————————————————————————————— 覆盖原则 (与 theme-2 / theme-6 深底同构): - T8 是深底主题, 与 T2/T6 同构, 与 T1/T3/T4/T5/T7 浅底相反 - --color-text-inverse 在深底家族下翻转为暗色 (#0a0a0a) - on-* 全家族必须显式覆盖 - 关键点: 金是亮色, text-on-primary 必须用深色 (#0a0a0a) 保证对比度 否则 "金字印金底" 无法阅读 (T2 pagination 坑的同构教训) 选择器 (与 theme-2/3/4/5/6/7 对齐): token 层用 :root; ParserController 每次只分发一份 theme-N ============================================================ */ :root { /* ========== 主色系 · Gold family ========== */ --color-primary: #d4af37; --color-primary-hover: #b8941f; --color-primary-active: #9c7a12; --color-primary-tint: #e8c968; --color-primary-light: rgba(212, 175, 55, 0.14); --color-primary-lighter: rgba(212, 175, 55, 0.07); --color-primary-dark: #6b5010; /* ========== 文本层 · 深底翻转 ========== */ --color-text: #fafaf7; --color-text-secondary: #b8b3a0; --color-text-muted: #71717a; --color-text-inverse: #0a0a0a; --color-secondary: #8c8577; --color-text-on-primary: #0a0a0a; --color-text-on-primary-secondary: rgba(10, 10, 10, 0.75); --color-text-on-accent: #0a0a0a; --color-text-on-success: #fafaf9; --color-text-on-danger: #fafaf9; --color-text-on-warning: #1c0a00; --color-text-on-dark: #fafaf7; --color-text-on-dark-secondary: rgba(250, 250, 247, 0.72); --color-text-on-dark-muted: rgba(250, 250, 247, 0.5); /* ========== 背景层 · 纯黑家族 ========== */ --color-bg: #0a0a0a; --color-bg-primary: #0a0a0a; --color-bg-secondary: #141414; --color-bg-tertiary: #1f1f1f; --color-bg-quaternary: #2d2d2d; --color-bg-dark: #050505; --color-bg-darker: #000000; --color-header-bg: #050505; --color-footer-bg: #000000; --color-footer-text: #d4af37; --color-bg-section: #0a0a0a; --color-bg-section-alt: #141414; --color-bg-overlay: rgba(0, 0, 0, 0.8); /* ========== 边框层 · 金色 alpha ========== */ --color-border: rgba(212, 175, 55, 0.14); --color-border-light: rgba(212, 175, 55, 0.06); --color-border-dark: rgba(212, 175, 55, 0.28); --color-border-focus: #d4af37; --color-border-hero: rgba(250, 250, 247, 0.08); --color-border-card-hover: #d4af37; --color-border-glow-primary: rgba(212, 175, 55, 0.45); /* ========== Overlay ========== */ --color-overlay: rgba(0, 0, 0, 0.8); --color-overlay-light: rgba(0, 0, 0, 0.5); --overlay-accent-10: rgba(212, 175, 55, 0.12); --overlay-primary-10: rgba(212, 175, 55, 0.1); --overlay-primary-15: rgba(212, 175, 55, 0.15); --overlay-primary-20: rgba(212, 175, 55, 0.2); --overlay-primary-30: rgba(212, 175, 55, 0.3); --overlay-primary-40: rgba(212, 175, 55, 0.4); --overlay-primary-50: rgba(212, 175, 55, 0.5); --overlay-text-06: rgba(0, 0, 0, 0.25); --overlay-text-08: rgba(0, 0, 0, 0.35); --overlay-text-10: rgba(0, 0, 0, 0.45); /* ========== 阴影 · gold tinted ========== */ --shadow-glow-primary: 0 8px 32px rgba(212, 175, 55, 0.22), 0 4px 12px rgba(212, 175, 55, 0.14); --shadow-focus: 0 0 0 3px rgba(212, 175, 55, 0.28); --shadow-card-hover: 0 8px 24px rgba(212, 175, 55, 0.18); --shadow-xs: 0 1px 2px var(--overlay-black-25); --shadow-sm: 0 2px 4px var(--overlay-black-25), 0 1px 2px var(--overlay-black-10); --shadow-md: 0 4px 12px var(--overlay-black-25), 0 2px 4px var(--overlay-black-10); --shadow-lg: 0 12px 32px var(--overlay-black-50), 0 4px 8px var(--overlay-black-25); --shadow-xl: 0 24px 48px var(--overlay-black-50), 0 8px 16px var(--overlay-black-25); --shadow-2xl: 0 32px 64px var(--overlay-black-50); --shadow-inner: inset 0 2px 4px var(--overlay-black-25); --shadow-card: 0 4px 16px var(--overlay-black-25); /* ========== Glass · V2 实色退化 ========== */ --glass-bg: #050505; /* ============================================================ Hero 激进四色斜渡 · 金光晕从顶左 → 真黑底右 对齐用户要求: 比 T5 再激进一点的三色/四色 hex linear-gradient 色停点: 顶左暗金晕 (奢华光感) 35% 过极暗金 70% 过深黑 100% 真黑 (视觉沉底) ============================================================ */ --color-gradient-radial: linear-gradient(160deg, #2a2010 0%, #1a1408 35%, #0a0a0a 70%, #000000 100% ); --color-gradient-cta: linear-gradient(135deg, #e8c968 0%, #d4af37 40%, #b8941f 100%); /* ============================================================ T8 专属点位覆盖 · 深底不可偷懒 ============================================================ */ --card-bg-elevated: #141414; --hero-tip-bg: var(--overlay-white-10); --hero-tip-border: var(--overlay-white-15); --hero-badge-bg: var(--overlay-primary-20); --hero-badge-border: var(--overlay-primary-30); /* ============================================================ 跨组件语义层 · T8 继承说明 T8 是 "深底 + 金主色" 结构, 与 T2/T6 同构 下列语义 token 通过 base 层 lazy var() 自动联动: --hero-bg → base: --color-gradient-radial (已覆盖为金黑斜渡) --hero-text → base: --color-text-on-dark (已覆盖为暖白) --badge-primary-* → base: --color-primary + --color-text-on-primary (深字金底) --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 (success/warning/danger 独立色域) --panel-* → base: bg-section / bg-section-alt T8 深底关键细节: · text-on-primary 翻成 #0a0a0a (深字印金底) 对比度达到 AA 级 · card-bg-elevated 覆盖为 #141414 防白卡撞黑底 · footer-text 主动用 #d4af37 金色, 深黑 Footer 上亮起 ============================================================ */ }