/* ========== tokens.css - 深色科技风设计系统 ========== * 参考 falao_claim_frontend 风格:深空蓝背景 + 青蓝渐变 + 玻璃态卡片 * 浅色主题通过 [data-theme="light"] 切换(默认深色) */ :root { /* === 核心配色(深色科技风) === */ --bg: #061426; --bg2: #0b1f3a; --card: rgba(255, 255, 255, .075); --card2: rgba(255, 255, 255, .115); --line: rgba(255, 255, 255, .13); --text: #eef7ff; --muted: #93a9c8; --blue: #1677ff; --cyan: #18e1ff; --gold: #f6c85f; --red: #ff5c7a; --green: #20c997; --purple: #7c5cff; --shadow: 0 28px 88px rgba(0, 0, 0, .35); /* === 语义化映射(兼容旧变量名) === */ --color-primary: var(--blue); --color-secondary: var(--cyan); --color-accent: var(--gold); --color-bg: var(--bg); --color-surface: var(--card); --color-text: var(--text); --color-text-muted: var(--muted); --color-border: var(--line); --color-success: var(--green); --color-danger: var(--red); --color-warning: var(--gold); --color-info: var(--blue); /* 向后兼容:旧变量名 */ --primary-color: var(--blue); --secondary-color: var(--cyan); --accent-color: var(--gold); --light-bg: var(--bg); /* monitor.css 旧变量名兼容 */ --bg-main: var(--bg); --bg-card: var(--card); --bg-card-hover: var(--card2); --text-main: var(--text); --text-sub: var(--muted); --border-color: var(--line); --accent-blue: var(--blue); --accent-cyan: var(--cyan); /* === 间距(4px 基数) === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* === 字号 === */ --font-xs: 11px; --font-sm: 12px; --font-base: 14px; --font-md: 15px; --font-lg: 18px; --font-xl: 22px; --font-xxl: 28px; /* === 圆角(参考文件较大圆角) === */ --radius-sm: 12px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 26px; /* === 阴影 === */ --shadow-sm: 0 4px 16px rgba(0, 0, 0, .2); --shadow-md: 0 12px 32px rgba(0, 0, 0, .3); --shadow-lg: var(--shadow); /* === 文字亮度变体 === */ --text-bright: #eef7ff; --text-dim: #9fb5d0; --text-accent: #c8fbff; --text-red-light: #ffd0d9; /* === KPI 标识色 === */ --color-purple: #a855f7; --color-orange: #f59e0b; --color-indigo: #3b82f6; /* === 字体栈 === */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: "Consolas", "Monaco", monospace; /* === 过渡 === */ --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; } /* === 浅色主题(可选,通过 切换) === */ [data-theme="light"] { --bg: #f5f7fa; --bg2: #ffffff; --card: rgba(255, 255, 255, .9); --card2: rgba(255, 255, 255, 1); --line: rgba(0, 0, 0, .1); --text: #2c3e50; --muted: #8a8a9a; --blue: #2c58a0; --cyan: #4b7bec; --gold: #f39c12; --red: #e74c3c; --green: #27ae60; --purple: #7c5cff; --shadow: 0 8px 24px rgba(0, 0, 0, .12); --color-primary: var(--blue); --color-secondary: var(--cyan); --color-bg: var(--bg); --color-surface: var(--card); --color-text: var(--text); --color-text-muted: var(--muted); --color-border: var(--line); --primary-color: var(--blue); --secondary-color: var(--cyan); --light-bg: var(--bg); --bg-main: var(--bg); --bg-card: var(--card); --bg-card-hover: var(--card2); --text-main: var(--text); --text-sub: var(--muted); --border-color: var(--line); --accent-blue: var(--blue); --accent-cyan: var(--cyan); }