/* =========================================================================== Design tokens A single source of truth for colour, spacing, typography and motion. Each timer mode swaps the --accent token so the whole UI re-themes itself. =========================================================================== */ :root { /* Surface palette (dark theme) */ --bg: #0f1115; --surface: #171a21; --surface-2: #1f232c; --border: #2a2f3a; /* Text */ --text: #e8eaed; --text-muted: #9aa0ac; --text-faint: #6b7280; /* Accent — overridden per mode at runtime via [data-mode] */ --accent: #ef5350; /* focus / tomato red */ --accent-soft: rgba(239, 83, 80, 0.15); /* Feedback */ --danger: #f06363; --success: #4caf82; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; /* Radii */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; /* Typography */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; /* Elevation */ --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25); /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.25s; } /* Per-mode accent colours, applied to */ body[data-mode="work"] { --accent: #ef5350; --accent-soft: rgba(239, 83, 80, 0.15); } body[data-mode="shortBreak"] { --accent: #4ca6e0; --accent-soft: rgba(76, 166, 224, 0.15); } body[data-mode="longBreak"] { --accent: #4caf82; --accent-soft: rgba(76, 175, 130, 0.15); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0s; } * { animation: none !important; } }