/* ======================================================== On Deck — Design Tokens ======================================================== Single source of truth for the visual language. All components reference these custom properties. ======================================================== */ :root { /* ---- Brand Palette ---- */ --navy: #393D47; --periwinkle: #6663FD; --periwinkle-light: #8583FD; --steel: #6E727E; --lime: #E9FC87; --cream: #FDF7E7; --cream-light: #FEFBF2; --cream-dark: #F5ECDA; /* ---- Dark Surface Hierarchy ---- */ --surface-bg: #4A4E58; /* Main background — lighter anthracite */ --surface-control: #3E4249; /* Control/filter areas — darker, recessed */ --surface-card: #53575F; /* Card surface — slightly lifted */ --surface-card-hover: #5A5E66; /* Card hover */ /* ---- Text ---- */ --text-primary: #F0EDE6; --text-secondary: #A8ABB2; --text-muted: #7A7E86; /* ---- Surfaces ---- */ --surface-white: #53575F; /* ---- Shadows (dark surfaces) ---- */ --shadow-card: 0px 4px 16px rgba(0, 0, 0, 0.25); --shadow-subtle: 0px 2px 8px rgba(0, 0, 0, 0.15); /* ---- Radii ---- */ --radius-card: 16px; --radius-btn: 12px; --radius-pill: 9999px; /* ---- Borders (dark surfaces) ---- */ --border-subtle: 1px solid rgba(255, 255, 255, 0.12); --border-panel: 1px solid rgba(255, 255, 255, 0.06); /* ---- State Colors ---- */ --interactive: #6663FD; --pressed: #524FE0; --disabled: #5A5E66; --error: #E57373; --success: #81C784; /* ---- Amber (kept for premium/alerts) ---- */ --amber-gold: #F2B705; /* ---- Past-event (dark surface) ---- */ --past-text: #6A6E76; --past-text-light: #565A62; --past-shadow: none; /* ---- CTA button glow ---- */ --shadow-cta: 0px 6px 20px rgba(102, 99, 253, 0.25); --shadow-cta-pressed: 0px 4px 12px rgba(102, 99, 253, 0.30); } /* ======================================================== Light Mode Overrides — Warm Sand Applied via ======================================================== */ [data-theme="light"] { /* ---- Surface Hierarchy ---- */ --surface-bg: #F5F3EE; --surface-control: #EBE9E4; /* Light warm surface for filter area */ --surface-card: #FFFFFF; --surface-card-hover: #F9F8F5; --surface-white: #FFFFFF; /* ---- Text ---- */ --text-primary: #1A1D23; --text-secondary: #5A5D64; --text-muted: #8E9199; /* ---- Shadows ---- */ --shadow-card: 0px 4px 16px rgba(0, 0, 0, 0.06); --shadow-subtle: 0px 2px 8px rgba(0, 0, 0, 0.05); /* ---- Borders ---- */ --border-subtle: 1px solid rgba(0, 0, 0, 0.10); --border-panel: 1px solid rgba(0, 0, 0, 0.05); /* ---- State Colors ---- */ --disabled: #C8C4BB; /* ---- Past-event ---- */ --past-text: #B0B3BA; --past-text-light: #C8CAD0; --past-shadow: none; /* ---- Glass (semi-transparent surface on content bg) ---- */ --glass-bg: rgba(0, 0, 0, 0.03); --glass-bg-hover: rgba(0, 0, 0, 0.06); --glass-border: rgba(0, 0, 0, 0.10); --glass-border-subtle: rgba(0, 0, 0, 0.06); /* ---- Focus ring ---- */ --focus-ring: 0 0 0 2px rgba(102, 99, 253, 0.20); /* ---- Spinner ---- */ --spinner-track: rgba(0, 0, 0, 0.12); }