/* ========================================================================= tokens.css — 设计令牌（明暗双主题） 所有颜色/间距/圆角/阴影/动效集中于此；app.css / components.css 仅引用变量。 主题切换：给 加 data-theme="light|dark"；不设置时跟随系统。 ========================================================================= */ :root { /* Signal palette: acid green for action, warm orange for emphasis. */ --brand-1: #b8e62e; --brand-2: #ff9d5c; --brand-grad: linear-gradient(112deg, #d7ff54 0%, #9ed51d 100%); --brand-soft: rgba(184, 230, 46, 0.12); --brand-ring: rgba(184, 230, 46, 0.3); /* 语义色 */ --success: #8dcf24; --success-soft: rgba(141, 207, 36, 0.14); --warn: #ffad4d; --warn-soft: rgba(255, 173, 77, 0.16); --danger: #ff6b61; --danger-soft: rgba(255, 107, 97, 0.14); --info: #67b7ff; --info-soft: rgba(103, 183, 255, 0.14); /* 字体 */ --font-sans: "Aptos", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --font-display: "Arial Narrow", "Aptos Display", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: "Cascadia Code", "SF Mono", Consolas, monospace; /* 圆角 */ --r-sm: 6px; --r-md: 10px; --r-lg: 15px; --r-xl: 20px; --r-pill: 999px; /* 阴影 */ --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-md: 0 18px 38px rgba(0, 0, 0, 0.12); --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.24); --shadow-brand: 0 10px 28px rgba(154, 206, 22, 0.2); /* 动效 */ --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"] { --brand-1: #557900; --brand-2: #c65e16; --brand-grad: linear-gradient(112deg, #678e05 0%, #405e00 100%); --brand-soft: rgba(85, 121, 0, 0.09); --brand-ring: rgba(85, 121, 0, 0.23); --bg: #e9e8e1; --bg-grad: radial-gradient(900px 560px at 7% -12%, rgba(140, 179, 28, 0.16), transparent 64%), radial-gradient(760px 500px at 100% 8%, rgba(255, 157, 92, 0.11), transparent 62%); --surface: #f8f7f1; --surface-2: #f0efe8; --surface-3: #e5e4dc; --text: #151914; --text-soft: #363d34; --muted: #71796e; --border: #d3d3ca; --border-soft: #e2e1d9; --row-hover: rgba(85, 121, 0, 0.06); --th-bg: rgba(239, 238, 230, 0.94); --overlay: rgba(14, 17, 13, 0.58); color-scheme: light; } /* —— 深色主题 —— */ [data-theme="dark"] { --bg: #090b09; --bg-grad: radial-gradient(980px 600px at 8% -15%, rgba(184, 230, 46, 0.11), transparent 65%), radial-gradient(800px 560px at 100% 6%, rgba(255, 157, 92, 0.08), transparent 62%); --surface: #111410; --surface-2: #171a16; --surface-3: #1d211b; --text: #eff4e9; --text-soft: #c6cec0; --muted: #7f897a; --border: rgba(235, 244, 225, 0.11); --border-soft: rgba(235, 244, 225, 0.065); --row-hover: rgba(184, 230, 46, 0.055); --th-bg: rgba(22, 26, 21, 0.94); --overlay: rgba(2, 4, 10, 0.62); color-scheme: dark; } /* 跟随系统（未显式设置主题时） */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #090b09; --bg-grad: radial-gradient(980px 600px at 8% -15%, rgba(184, 230, 46, 0.11), transparent 65%), radial-gradient(800px 560px at 100% 6%, rgba(255, 157, 92, 0.08), transparent 62%); --surface: #111410; --surface-2: #171a16; --surface-3: #1d211b; --text: #eff4e9; --text-soft: #c6cec0; --muted: #7f897a; --border: rgba(235, 244, 225, 0.11); --border-soft: rgba(235, 244, 225, 0.065); --row-hover: rgba(184, 230, 46, 0.055); --th-bg: rgba(22, 26, 21, 0.94); --overlay: rgba(2, 4, 2, 0.7); 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; } }