/* ============================================================ 芯火村 · 统一设计令牌 (Design Tokens) 东方幻想村落 / 夜色山谷 / 暖金灯火 / 篝火 / 玻璃拟态 / 金色描边 -------------------------------------------------------------- 用法：每个页面 里最先引入本文件，然后删除该页本地 :root 中重复定义的 --gold / --bg / --panel 等变量，即可全站统一。 权威令牌统一用 --xh-* 前缀；文件末尾提供旧变量名别名以兼容现有 CSS。 ============================================================ */ :root { /* ---------- 1. 原始色 · 夜色底 ---------- */ --xh-night-0: #05080d; /* 最深，页面兜底 */ --xh-night-1: #070d14; /* 标准夜色山谷底色 */ --xh-night-2: #0c141d; /* 略亮，分层用 */ --xh-night-3: #121c27; /* 卡片底衬 */ /* ---------- 2. 原始色 · 暖金灯火 ---------- */ --xh-gold: #f4c879; /* 主金：标题高亮、激活态、品牌 */ --xh-gold-hot: #ffb347; /* 热金：hover、强调、发光 */ --xh-gold-bright: #ffd887;/* 亮金：高光、点睛 */ --xh-gold-deep: #d7a95f; /* 深金：次要描边、静态文字 */ --xh-ember: #ff8a3d; /* 篝火橙：强暖强调 */ /* ---------- 3. 文字色 ---------- */ --xh-cream: #fff1d2; /* 主标题 / 最亮文字 */ --xh-text: #f7e5c3; /* 正文 */ --xh-muted: rgba(247, 229, 195, 0.70); /* 次要文字 */ --xh-faint: rgba(247, 229, 195, 0.45); /* 弱化 / 占位 */ --xh-on-gold: #2a1707; /* 金色实底按钮上的深色文字 */ /* ---------- 4. 描边 · 金线 ---------- */ --xh-border: rgba(244, 200, 121, 0.30); /* 常规金边 */ --xh-border-hot: rgba(255, 218, 143, 0.62); /* hover 金边 */ --xh-line: rgba(244, 200, 121, 0.20); /* 分割线 */ --xh-line-strong: rgba(244, 200, 121, 0.42); /* ---------- 5. 玻璃拟态面板 ---------- */ --xh-panel: rgba(24, 20, 14, 0.66); /* 标准玻璃面板 */ --xh-panel-soft: rgba(30, 26, 18, 0.50); /* 轻玻璃 */ --xh-panel-strong: rgba(14, 12, 9, 0.82); /* 重玻璃 / 弹层 */ --xh-glass-blur: 14px; --xh-glass-blur-soft: 10px; --xh-glass-sheen: inset 0 0 18px rgba(255, 255, 255, 0.045); /* 玻璃内高光 */ /* ---------- 6. 阴影 & 辉光 ---------- */ --xh-shadow-sm: 0 6px 16px rgba(82, 45, 13, 0.16); --xh-shadow-md: 0 10px 24px rgba(82, 45, 13, 0.20); --xh-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.38); --xh-glow-gold: 0 0 18px rgba(255, 181, 73, 0.28); /* 金色发光 */ --xh-glow-gold-strong: 0 0 28px rgba(255, 224, 142, 0.6); /* ---------- 7. 状态色（成功/警告/危险/信息） ---------- */ --xh-success: #7dc290; --xh-warn: #e8b45c; --xh-danger: #e06a5a; --xh-info: #6ea8d8; --xh-success-bg: rgba(125, 194, 144, 0.14); --xh-warn-bg: rgba(232, 180, 92, 0.14); --xh-danger-bg: rgba(224, 106, 90, 0.14); --xh-info-bg: rgba(110, 168, 216, 0.14); /* ---------- 8. 字体 ---------- */ --xh-font-serif: "STSong", "Songti SC", "SimSun", serif; /* 标题 · 大气宋体 */ --xh-font-kai: "STKaiti", "KaiTi", "Songti SC", serif; /* 点缀 · 宣言 / 印章感 */ --xh-font-sans: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif; /* 正文 */ --xh-font-num: "STSong", "Songti SC", serif; /* 村民编号等数字 */ /* ---------- 9. 字号阶梯（响应式 clamp） ---------- */ --xh-fs-xs: 12px; --xh-fs-sm: 13px; --xh-fs-base: 15px; --xh-fs-md: 17px; --xh-fs-lg: clamp(18px, 1.4vw, 20px); --xh-fs-xl: clamp(20px, 1.8vw, 24px); --xh-fs-2xl: clamp(26px, 2.6vw, 32px); --xh-fs-3xl: clamp(32px, 3.6vw, 44px); --xh-fs-display: clamp(42px, 4.65vw, 76px); /* 首页主标题 */ --xh-lh-tight: 1.15; --xh-lh-base: 1.7; /* ---------- 10. 间距刻度 ---------- */ --xh-space-1: 4px; --xh-space-2: 8px; --xh-space-3: 12px; --xh-space-4: 16px; --xh-space-5: 20px; --xh-space-6: 24px; --xh-space-8: 32px; --xh-space-10: 40px; --xh-space-12: 48px; --xh-space-16: 64px; /* ---------- 11. 圆角 ---------- */ --xh-radius-sm: 8px; --xh-radius-md: 12px; --xh-radius-lg: 14px; --xh-radius-xl: 20px; --xh-radius-pill: 999px; /* ---------- 12. 动效 ---------- */ --xh-dur-fast: 120ms; --xh-dur: 180ms; --xh-dur-slow: 320ms; --xh-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ---------- 13. 渐变（复用件） ---------- */ --xh-grad-gold: linear-gradient(180deg, #f0bd60, #bd7327); /* 金色实底按钮 */ --xh-grad-gold-hover: linear-gradient(180deg, #f6c96e, #c67c2c); --xh-grad-glass: linear-gradient(180deg, rgba(255, 236, 184, 0.16), rgba(122, 78, 35, 0.20)); /* 玻璃按钮 */ --xh-grad-rule: linear-gradient(90deg, var(--xh-gold), transparent); /* 装饰短线 */ /* ============================================================ 旧变量名别名 —— 让现有各页 CSS 无需改类名即可继承统一值。 页面引入 tokens.css 后，删除本地 :root 中这些同名定义即可。 ============================================================ */ --bg: var(--xh-night-1); --gold: var(--xh-gold); --gold-hot: var(--xh-gold-hot); --gold-soft: var(--xh-gold-bright); --gold-bright: var(--xh-gold-bright); --gold-dim: var(--xh-gold-deep); --cream: var(--xh-cream); --text: var(--xh-text); --muted: var(--xh-muted); --faint: var(--xh-faint); --panel: var(--xh-panel); --panel-soft: var(--xh-panel-soft); --panel-strong: var(--xh-panel-strong); --border: var(--xh-border); --border-hot: var(--xh-border-hot); --line: var(--xh-line); --line-bright: var(--xh-line-strong); --shadow: var(--xh-shadow-md); --font-serif: var(--xh-font-serif); --font-sans: var(--xh-font-sans); /* 页面专有别名（village-home / villager-passport 等历史命名） */ --glass: var(--xh-panel-soft); --glass-strong: var(--xh-panel); --ink: rgba(8, 6, 5, 0.42); --panel2: var(--xh-panel-strong); --line2: var(--xh-line-strong); }