/* Design tokens — lifted 1:1 from BuffTracker/DESIGN_SPEC.md. Switching [data-theme] on swaps the entire palette + typography. Every consuming property has a transition, so the swap cross-fades. */ :root { --ring-c: 157.08; /* SVG ring circumference (r=25) */ --wrap: 1140px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --swap: 480ms; /* theme cross-fade duration */ color-scheme: dark; } /* ── Fantasy · Spellbook ─────────────────────────────── */ :root[data-theme="fantasy"] { --base: #100A17; --base-top: #1A0E2B; --base-bottom: #0A0610; --surface: #1F1730; --surface-top: #271A3C; --surface-2: #1A1229; --text: #F3E9D6; --muted: #A99BBF; --accent: #FFCF7A; --accent-2: #B98CFF; --charging: #A98BFF; --active: #3FD9A0; --cooldown: #E6923C; --ready: #FFCF7A; --card-border: rgba(242, 178, 74, 0.16); --glow: 0.9; --card-radius: 18px; --font-display: "Cinzel", Georgia, serif; --font-body: "Spectral", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --display-weight: 700; --display-spacing: 0.01em; } /* ── Sci-fi · Reactor ────────────────────────────────── */ :root[data-theme="scifi"] { --base: #04060B; --base-top: #07131F; --base-bottom: #02040A; --surface: #0A1220; --surface-top: #0D1A2B; --surface-2: #080F1B; --text: #E6F3FF; --muted: #7F94AB; --accent: #35D0FF; --accent-2: #FF3D9A; --charging: #35D0FF; --active: #86FF5A; --cooldown: #FFB020; --ready: #FF3D9A; --card-border: rgba(53, 208, 255, 0.18); --glow: 0.85; --card-radius: 12px; --font-display: "Chakra Petch", system-ui, sans-serif; --font-body: "Chakra Petch", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --display-weight: 700; --display-spacing: 0.04em; } /* ── Minimal · Clean ─────────────────────────────────── */ :root[data-theme="minimal"] { --base: #0B0C0F; --base-top: #101116; --base-bottom: #08090B; --surface: #16181D; --surface-top: #16181D; --surface-2: #16181D; --text: #F2F3F5; --muted: #8B8F97; --accent: #6F7BFF; --accent-2: #AAB2C4; --charging: #6F9BFF; --active: #57C98A; --cooldown: #D9A441; --ready: #CBD0D8; --card-border: rgba(255, 255, 255, 0.08); --glow: 0; --card-radius: 16px; --font-display: "Manrope", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif; --font-mono: "Manrope", ui-monospace, monospace; --display-weight: 800; --display-spacing: -0.01em; }