/* ================================================================ Union Sign-in System — CSS Variables (Design Tokens) 科技感设计规范 · Tech-Inspired Design System 版本: v2.0 / 2026-05-16 ================================================================ 层级结构: :root — 默认浅色主题 (Light) [data-theme="dark"] — 暗色主题 (Dark) 所有组件使用 var(--xxx) 引用，无需直接写色值 兼容性: 保留所有现有变量名，仅调整值 ================================================================ */ /* ────────────────────────────────────────────── :root — 浅色主题 (Default Light) ────────────────────────────────────────────── */ :root { /* ═══ 品牌色 Brand Colors ═══ */ --primary: #4F46E5; /* 靛蓝主色 (原 #1a73e8) */ --primary-light: #6366F1; /* 浅靛蓝 */ --primary-dark: #3730A3; /* 深靛蓝 (原 #1557b0) */ --primary-glow: rgba(79, 70, 229, 0.25); /* 主色光晕 */ --primary-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); /* 蓝紫渐变 */ --secondary-gradient: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%); /* 青蓝渐变 */ /* ═══ 功能色 Semantic Colors ═══ */ --success: #10B981; /* 翠绿 (原 #34a853) */ --success-light: #D1FAE5; /* 浅绿背景 */ --danger: #EF4444; /* 红色 (原 #ea4335) */ --danger-light: #FEE2E2; /* 浅红背景 */ --warning: #F59E0B; /* 琥珀 (原 #fbbc04) */ --warning-light: #FEF3C7; /* 浅琥珀背景 */ --info: #3B82F6; /* 信息蓝 */ --info-light: #DBEAFE; /* 浅蓝背景 */ /* ═══ 中性色 Neutral Colors ═══ */ --text: #1E1B4B; /* 深灰蓝 (原 #202124) */ --text-secondary: #6B7280; /* 辅助文字 (原 #5f6368) */ --text-tertiary: #9CA3AF; /* 弱化文字 */ --text-inverse: #F9FAFB; /* 深色底上的文字 */ --border: #E5E7EB; /* 分割线/边框 (原 #dadce0) */ --border-light: #F3F4F6; /* 浅边框 */ /* ═══ 背景色 Background Colors ═══ */ --bg: #F0F4FF; /* 页面底色 淡靛蓝 (原 #eef2f7) */ --bg-alt: #FFFFFF; /* 备选背景 */ --card: rgba(255, 255, 255, 0.82); /* 卡片 玻璃拟态 (原 #ffffff) */ --card-solid: #FFFFFF; /* 纯白卡片（fallback） */ --card-hover: rgba(255, 255, 255, 0.95); --surface: #F9FAFB; /* 底层容器 */ --overlay: rgba(0, 0, 0, 0.45); /* 遮罩 */ /* ═══ 导航栏 Nav ═══ */ --nav-bg: rgba(255, 255, 255, 0.78); --nav-blur: 12px; --nav-border: rgba(0, 0, 0, 0.06); /* ═══ 圆角 Border Radius ═══ */ --radius-xs: 6px; --radius-sm: 8px; --radius: 12px; /* 默认 (原值保留) */ --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ═══ 阴影 Shadows ═══ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.10), 0 8px 20px rgba(0, 0, 0, 0.04); --shadow-glow: 0 0 20px var(--primary-glow); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04); /* ═══ 光晕 Glow Effects ═══ */ --glow-primary: 0 0 24px rgba(79, 70, 229, 0.3); --glow-success: 0 0 24px rgba(16, 185, 129, 0.3); --glow-danger: 0 0 24px rgba(239, 68, 68, 0.3); /* ═══ 过渡 Transitions ═══ */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); /* ═══ 字体 Typography ═══ */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --font-display: 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif; /* 字号梯度 (min 16px mobile) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 1rem; /* 16px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px */ --text-hero: 3rem; /* 48px */ /* 字重 */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* 行高 */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ═══ 间距 Spacing (4px base) ═══ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ═══ 触控 Touch Targets ═══ */ --touch-min: 44px; /* 最小触控区域 */ --touch-sm: 36px; /* ═══ 组件 Component Tokens ═══ */ /* Button */ --btn-height: 48px; --btn-radius: var(--radius-sm); --btn-padding-x: 24px; --btn-font-size: var(--text-base); --btn-font-weight: var(--weight-semibold); /* Input */ --input-height: 48px; --input-radius: var(--radius-sm); --input-border-width: 1.5px; --input-focus-ring: 0 0 0 3px var(--primary-glow); /* Card */ --card-padding: 20px; --card-gap: 12px; --card-border: 0.5px solid rgba(255, 255, 255, 0.18); --card-backdrop: blur(16px) saturate(180%); /* Toast */ --toast-radius: var(--radius); --toast-shadow: var(--shadow-lg); /* ═══ Z-index 层级 ═══ */ --z-dropdown: 100; --z-sticky: 200; --z-nav: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; /* ═══ 玻璃拟态 Glassmorphism ═══ */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.25); --glass-blur: 16px; --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); } /* ────────────────────────────────────────────── [data-theme="dark"] — 暗色主题 ────────────────────────────────────────────── */ [data-theme="dark"] { /* ═══ 品牌色 (暗色模式微调更亮) ═══ */ --primary: #818CF8; /* 更亮的靛蓝 */ --primary-light: #A5B4FC; --primary-dark: #6366F1; --primary-glow: rgba(129, 140, 248, 0.3); --primary-gradient: linear-gradient(135deg, #6366F1 0%, #A78BFA 100%); /* ═══ 功能色 ═══ */ --success: #34D399; --success-light: rgba(52, 211, 153, 0.15); --danger: #F87171; --danger-light: rgba(248, 113, 113, 0.15); --warning: #FBBF24; --warning-light: rgba(251, 191, 36, 0.15); --info: #60A5FA; --info-light: rgba(96, 165, 250, 0.15); /* ═══ 中性色 ═══ */ --text: #E5E7EB; --text-secondary: #9CA3AF; --text-tertiary: #6B7280; --text-inverse: #111827; --border: #374151; --border-light: #1F2937; /* ═══ 背景色 ═══ */ --bg: #0F172A; /* 深蓝黑 */ --bg-alt: #1E293B; --card: rgba(30, 41, 59, 0.78); /* 暗色玻璃卡片 */ --card-solid: #1E293B; --card-hover: rgba(30, 41, 59, 0.92); --surface: #1E293B; --overlay: rgba(0, 0, 0, 0.65); /* ═══ 导航栏 ═══ */ --nav-bg: rgba(15, 23, 42, 0.85); --nav-blur: 16px; --nav-border: rgba(255, 255, 255, 0.06); /* ═══ 阴影 (暗色模式更重) ═══ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 24px var(--primary-glow); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.06); /* ═══ 光晕 ═══ */ --glow-primary: 0 0 32px rgba(129, 140, 248, 0.4); --glow-success: 0 0 32px rgba(52, 211, 153, 0.4); --glow-danger: 0 0 32px rgba(248, 113, 113, 0.4); /* ═══ 玻璃拟态 ═══ */ --glass-bg: rgba(30, 41, 59, 0.72); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 16px; --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* ═══ 焦点环 ═══ */ --input-focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.3); /* ═══ Toast ═══ */ --toast-shadow: var(--shadow-xl); }