/* ========================================================================= tokens.css — 设计令牌（明暗双主题） 所有颜色/间距/圆角/阴影/动效集中于此；app.css / components.css 仅引用变量。 主题切换：给 加 data-theme="light|dark"；不设置时跟随系统。 ========================================================================= */ :root { /* 品牌主色（靛蓝→紫，用于主操作与高亮） */ --brand-1: #6366f1; --brand-2: #8b5cf6; --brand-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --brand-soft: rgba(99, 102, 241, 0.12); --brand-ring: rgba(99, 102, 241, 0.35); /* 语义色 */ --success: #10b981; --success-soft: rgba(16, 185, 129, 0.14); --warn: #f59e0b; --warn-soft: rgba(245, 158, 11, 0.16); --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.14); --info: #3b82f6; --info-soft: rgba(59, 130, 246, 0.14); /* 字体 */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-mono: "SF Mono", "JetBrains Mono", Consolas, "Roboto Mono", monospace; /* 圆角 */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* 阴影 */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05); --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08); --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.14); --shadow-brand: 0 10px 26px rgba(99, 102, 241, 0.32); /* 动效 */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; } /* —— 浅色主题（默认）—— */ :root, [data-theme="light"] { --bg: #f5f6fb; --bg-grad: radial-gradient(1200px 600px at 12% -8%, rgba(99, 102, 241, 0.10), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(139, 92, 246, 0.08), transparent 55%); --surface: #ffffff; --surface-2: #fafaff; --surface-3: #f3f4fb; --text: #0f172a; --text-soft: #334155; --muted: #64748b; --border: #e6e8f0; --border-soft: #eef0f6; --row-hover: rgba(99, 102, 241, 0.045); --th-bg: rgba(248, 248, 253, 0.92); --overlay: rgba(15, 23, 42, 0.45); color-scheme: light; } /* —— 深色主题 —— */ [data-theme="dark"] { --bg: #0b0e16; --bg-grad: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.16), transparent 60%), radial-gradient(900px 520px at 100% 0%, rgba(139, 92, 246, 0.12), transparent 55%); --surface: #141925; --surface-2: #181e2c; --surface-3: #1f2636; --text: #e8ebf2; --text-soft: #c2c8d6; --muted: #8b93a7; --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.05); --row-hover: rgba(129, 140, 248, 0.08); --th-bg: rgba(26, 32, 46, 0.92); --overlay: rgba(2, 4, 10, 0.62); color-scheme: dark; } /* 跟随系统（未显式设置主题时） */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0b0e16; --bg-grad: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.16), transparent 60%), radial-gradient(900px 520px at 100% 0%, rgba(139, 92, 246, 0.12), transparent 55%); --surface: #141925; --surface-2: #181e2c; --surface-3: #1f2636; --text: #e8ebf2; --text-soft: #c2c8d6; --muted: #8b93a7; --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.05); --row-hover: rgba(129, 140, 248, 0.08); --th-bg: rgba(26, 32, 46, 0.92); --overlay: rgba(2, 4, 10, 0.62); color-scheme: dark; } } /* 动效减弱：尊重用户系统偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }