/* ============================================================ tokens.css — 设计令牌（Design Tokens） 从 admin.css :root 提取并扩展，作为所有样式的单一数据源 ============================================================ */ :root { /* ================================ 主色调 ================================ */ --primary: #1a73e8; --primary-hover: #1557b0; --primary-active: #0d47a1; --primary-light: rgba(26,115,232,0.10); --primary-light-2: rgba(26,115,232,0.06); --primary-border: rgba(26,115,232,0.15); --primary-border-hov: rgba(26,115,232,0.40); /* ================================ 功能色 ================================ */ --success: #34a853; --success-light: rgba(52,168,83,0.10); --success-border: rgba(52,168,83,0.20); --warning: #f4b942; --warning-light: rgba(244,185,66,0.20); --warning-border: rgba(244,185,66,0.35); --danger: #ea4335; --danger-light: rgba(234,67,53,0.08); --danger-border: rgba(234,67,53,0.25); --orange: #ff6b35; --orange-light: rgba(255,107,53,0.10); --purple: #667eea; --purple-light: rgba(102,126,234,0.10); --gold: #f5a623; --gold-light: rgba(245,166,35,0.15); /* ================================ 中性色 ================================ */ --bg: #f5f6fa; --bg-card: #ffffff; --bg-input: #f8f9fa; --bg-hover: rgba(0,0,0,0.03); --bg-active: rgba(0,0,0,0.06); --text: #202124; --text-1: #333333; --text-2: #666666; --text-3: #999999; --text-inverse: #ffffff; --border: #e8ecf1; --border-light: #f0f2f5; --border-dark: #d0d5dd; /* ================================ 阴影 ================================ */ --shadow: 0 4px 24px rgba(0,0,0,0.12); --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.15); --shadow-overlay: 0 12px 48px rgba(0,0,0,0.20); /* ================================ 圆角 ================================ */ --radius: 12px; --radius-sm: 8px; --radius-xs: 4px; --radius-full: 50%; /* ================================ 间距 (基于 4px 增量) ================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* ================================ 过渡 ================================ */ --tr: all 0.2s ease; --tr-slow: all 0.3s ease; --tr-fast: all 0.1s ease; /* ================================ 字体 ================================ */ --font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif; --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ================================ 布局 ================================ */ --sidebar-width: 220px; --topbar-height: 56px; --topbar-bg: rgba(255,255,255,0.92); /* ================================ 层级 (z-index) ================================ */ --z-sidebar: 100; --z-topbar: 200; --z-modal-backdrop: 9000; --z-modal: 9999; --z-tooltip: 10000; } /* ================================ 深色主题（手动切换） 在 上设置 data-theme="dark" 启用 ================================ */ [data-theme="dark"] { --primary-light: rgba(26,115,232,0.15); --primary-light-2: rgba(26,115,232,0.08); --primary-border: rgba(26,115,232,0.20); --success-light: rgba(52,168,83,0.12); --warning-light: rgba(244,185,66,0.18); --danger-light: rgba(234,67,53,0.10); --orange-light: rgba(255,107,53,0.10); --purple-light: rgba(102,126,234,0.10); --gold-light: rgba(245,166,35,0.12); --bg: #0d1117; --bg-card: #161b22; --bg-input: #21262d; --bg-hover: rgba(255,255,255,0.04); --bg-active: rgba(255,255,255,0.08); --text: #e6edf3; --text-1: #c9d1d9; --text-2: #8b949e; --text-3: #6e7681; --text-inverse: #ffffff; --border: #30363d; --border-light: #3d444d; --border-dark: #21262d; --shadow: 0 4px 16px rgba(0,0,0,0.4); --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); --shadow-overlay: 0 12px 48px rgba(0,0,0,0.6); --topbar-bg: rgba(13,17,23,0.92); }