/* Design tokens. Dark is the default; light follows the OS unless the user picks a theme, in which case data-theme on wins. */ :root { --bg: #0b0d10; --surface: #12151a; --surface-2: #171b22; --line: #232932; --line-soft: #1b2027; --text: #e8ecf2; --text-dim: #98a3b3; --text-mute: #6b7686; --accent: #2dd4bf; --accent-ink: #04211d; --accent-soft: #12312e; --ok: #34d399; --ok-soft: #0f2a22; --warn: #fbbf24; --warn-soft: #2b2110; --danger: #f87171; --danger-soft: #2c1618; --info: #60a5fa; --info-soft: #12203a; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13.5px; --fs-lg: 16px; --fs-xl: 20px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5); --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --transition: 120ms ease-out; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #fbfcfd; --surface: #ffffff; --surface-2: #f4f6f8; --line: #e2e6ec; --line-soft: #eef1f5; --text: #111827; --text-dim: #5b6675; --text-mute: #8b94a3; --accent: #0d9488; --accent-ink: #ffffff; --accent-soft: #e6faf7; --ok: #059669; --ok-soft: #e7f7f1; --warn: #b45309; --warn-soft: #fdf3e3; --danger: #dc2626; --danger-soft: #fdeaea; --info: #2563eb; --info-soft: #e8effd; --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 8px 24px -12px rgb(16 24 40 / 0.18); } } :root[data-theme="light"] { --bg: #fbfcfd; --surface: #ffffff; --surface-2: #f4f6f8; --line: #e2e6ec; --line-soft: #eef1f5; --text: #111827; --text-dim: #5b6675; --text-mute: #8b94a3; --accent: #0d9488; --accent-ink: #ffffff; --accent-soft: #e6faf7; --ok: #059669; --ok-soft: #e7f7f1; --warn: #b45309; --warn-soft: #fdf3e3; --danger: #dc2626; --danger-soft: #fdeaea; --info: #2563eb; --info-soft: #e8effd; --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 8px 24px -12px rgb(16 24 40 / 0.18); } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }