/* ============================================ UNF Design Tokens — v2.0 上半部分:新 Token(规范第 3 章) 下半部分:旧变量名别名(兼容现有 CSS / JS 引用,逐步淘汰) ============================================ */ :root { /* ══════ 新 Token ══════ */ /* 背景与表面 */ --bg: #0A0F1F; --surface-1: #111A33; --surface-2: #18233F; --surface-3: #1F2C4D; --line: rgba(255, 255, 255, .06); --overlay: rgba(4, 6, 13, .72); /* 品牌蓝(只用于英雄卡和页面光晕) */ --blue-500: #3552DC; --blue-700: #1E2F95; --blue-900: #121C5C; --blue-glow: rgba(47, 75, 208, .28); /* 金色 */ --gold: #E9C46A; --gold-hi: #F6DFA0; --gold-lo: #B98F3A; --gold-bg: rgba(233, 196, 106, .10); --gold-border: rgba(233, 196, 106, .30); --gold-ring: rgba(233, 196, 106, .12); /* 语义色 */ --green: #3DD9A0; --green-bg: rgba(61, 217, 160, .10); --red: #FF6B7A; --red-bg: rgba(255, 107, 122, .12); --orange: #FF9F43; --orange-bg: rgba(255, 159, 67, .12); /* 档位色(仅 Leasing 档位标签 / 插画光晕) */ --tier-entry: #8FA3D1; --tier-pro: #6F8BFF; --tier-elite: #D5DDF5; --tier-ultimate: #E9C46A; /* 文字 */ --text-1: #F3F6FC; --text-2: #9AA7C7; --text-3: #66739A; --text-on-gold: #2A1F05; --text-on-hero: rgba(255, 255, 255, .72); --text-on-hero-3: rgba(255, 255, 255, .50); /* 字体 */ --font: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", Roboto, sans-serif; /* 圆角(只许这 7 个值) */ --r-xs: 8px; --r-sm: 12px; --r-md: 14px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-pill: 999px; /* 间距 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --page-x: 18px; --gap-card: 14px; --gap-grid: 12px; /* 阴影 */ --sh-card: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35); --sh-hero: 0 14px 40px rgba(47,75,208,.35), inset 0 1px 0 rgba(255,255,255,.18); --sh-gold: 0 10px 26px rgba(233,196,106,.28), inset 0 1px 0 rgba(255,255,255,.5); --sh-sheet: 0 -10px 40px rgba(0,0,0,.5); /* 渐变 */ --grad-hero: linear-gradient(135deg, #3552DC 0%, #1E2F95 55%, #121C5C 100%); --grad-card: linear-gradient(180deg, #131D38, #0F1730); --grad-gold: linear-gradient(135deg, #F6DFA0, #E9C46A 45%, #B98F3A); --grad-chart-up: linear-gradient(180deg, rgba(61,217,160,.28), rgba(61,217,160,0)); --grad-chart-down: linear-gradient(180deg, rgba(255,107,122,.28), rgba(255,107,122,0)); /* 动效 */ --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: 150ms; --t-base: 250ms; --t-slow: 600ms; /* ══════ 旧变量别名(兼容层) ══════ */ /* 背景 */ --bg-primary: var(--bg); --bg-card: var(--surface-1); --bg-surface: var(--surface-1); --bg-elevated: var(--surface-2); --bg-inset: var(--surface-2); /* 文字 */ --text-primary: var(--text-1); --text-secondary: var(--text-2); --text-fg: var(--text-1); --text-muted: var(--text-2); --text-dim: var(--text-3); --text-inv: var(--text-on-gold); /* 边框:统一为极淡分割线;卡片级描边在 components.css 中已移除 */ --border: var(--line); --border-color: var(--line); --border-light: rgba(255, 255, 255, .04); --border-brand: var(--gold-border); /* 品牌金 */ --accent: var(--gold); --brand: var(--gold); --brand-hover: var(--gold-hi); --brand-dim: var(--gold-bg); --brand-glow: var(--gold-ring); --gold-hover: var(--gold-hi); --gold-dim: var(--gold-bg); --gold-glow: var(--gold-ring); --gold-text: var(--gold); --gold-button: var(--grad-gold); --gold-button-hover: linear-gradient(135deg, #FBE8B4, #EFCF7C 45%, #C49A44); --gold-button-active: linear-gradient(135deg, #E8CE86, #D9B35A 45%, #A98030); --gold-button-border: transparent; /* 蓝色 Hero */ --blue-hero: var(--blue-500); --blue-hero-end: var(--blue-900); --blue-hero-glow: var(--blue-glow); --hero-border: transparent; --hero-text: var(--text-1); --hero-secondary: var(--text-on-hero); --hero-muted: var(--text-on-hero-3); /* 语义色 */ --success: var(--green); --success-dim: var(--green-bg); --red-dim: var(--red-bg); --amber: var(--orange); --amber-dim: var(--orange-bg); /* 规范不允许蓝/紫作文字色:旧引用统一落到次要文字色 */ --blue: var(--text-2); --blue-dim: rgba(255, 255, 255, .05); --blue-light: var(--text-2); --purple: var(--text-2); --purple-dim: rgba(255, 255, 255, .05); /* 圆角别名 */ --r-full: var(--r-pill); --r-card: var(--r-xl); /* 间距 */ --section-gap: var(--gap-card); /* 字体:mono 指向同一字体,一次性消灭等宽 */ --font-sans: var(--font); --font-display: var(--font); --font-mono: var(--font); --font-family: var(--font); /* 字号 */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 26px; --fs-3xl: 32px; --fs-title: 17px; /* 布局 */ --header-h: 48px; --tabbar-h: 88px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --page-px: var(--page-x); --control-h: 48px; /* 层级 */ --z-page: 1; --z-header: 100; --z-tabbar: 100; --z-modal-mask: 500; --z-modal: 510; --z-toast: 600; --z-loading: 700; /* 动画 */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: var(--t-fast); --dur-normal: var(--t-base); --dur-slow: 400ms; /* 阴影别名 */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.16); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.28); --shadow-brand: var(--sh-gold); --shadow-gold: var(--sh-gold); --shadow-hero: var(--sh-hero); /* 新页面兼容变量 */ --color-bg: var(--bg); --color-surface: var(--surface-1); --color-surface-raised: var(--surface-2); --color-input-bg: var(--surface-2); --color-border: var(--line); --color-divider: var(--border-light); --color-text: var(--text-1); --color-text-secondary: var(--text-2); --color-text-muted: var(--text-3); --color-on-primary: var(--text-on-gold); --color-primary: var(--gold); --color-primary-light: var(--gold-hi); --color-primary-deep: var(--gold-lo); --color-blue: var(--blue); --color-purple: var(--purple); --color-success: var(--green); --color-warning: var(--orange); --color-error: var(--red); }