/* ============================================================ Dayzleft — Design Tokens (canonical) Source of truth: docs/DESIGN-SYSTEM.md One green, one amber, one red, one light bg, one dark bg. Light is the default; dark is applied via the theme class. NOTE: This file is the reference set of values. Surfaces adopt these gradually; do not assume it is linked everywhere yet. ============================================================ */ :root { /* Brand / semantic */ --green: #34C759; --green-press: #2AA84A; --green-dim: rgba(52,199,89,.16); --amber: #E8B23A; --gold: #C9A24B; --red: #E5484D; --red-dim: rgba(229,72,77,.12); /* Neutrals — Light (default) */ --bg: #FEFEFE; --surface: #FFFFFF; --elev: #F5F4F1; --fg: #232328; --muted: #5A5A63; --faint: #8A8A93; --line: rgba(0,0,0,.10); --field-fill: rgba(0,0,0,.05); /* Traffic-light (semantic, same both themes) */ --tl-go: var(--green); --tl-soon: var(--amber); --tl-final: var(--red); /* Type scale */ --t-caption: 12px; --t-sm: 14px; --t-base: 16px; --t-lead: 18px; --t-h4: 20px; --t-h3: 24px; --t-h2: 30px; --t-h1: 38px; --t-hero: clamp(40px, 8vw, 64px); --ff-sans: 'Nunito', system-ui, -apple-system, sans-serif; --ff-mono: 'Space Mono', ui-monospace, monospace; /* Radius */ --r-btn: 14px; --r-card: 16px; --r-modal: 20px; --r-pill: 999px; --r-dot: 50%; /* Spacing (4-based) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* Shadows */ --shadow-card: 0 2px 8px rgba(0,0,0,.06); --shadow-pop: 0 14px 36px rgba(0,0,0,.10); --shadow-modal: 0 24px 60px rgba(0,0,0,.30); --focus-ring: 0 0 0 3px var(--green-dim); --btn-glow: 0 6px 18px rgba(52,199,89,.30); } /* Dark theme — applied via the manual theme class on or . Adjust the selector to match the app's existing toggle class. */ .theme-dark { --bg: #15161C; --surface: #1D1F27; --elev: #21242C; --fg: #F4F5F7; --muted: rgba(244,245,247,.68); --faint: rgba(244,245,247,.46); --line: rgba(255,255,255,.14); --field-fill: rgba(255,255,255,.13); /* green / amber / red unchanged */ --shadow-card: 0 2px 8px rgba(0,0,0,.30); --shadow-pop: 0 14px 36px rgba(0,0,0,.45); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }