/* ======================================================== 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); /* ---- Semantic Accent (swaps per theme) ---- */ /* Use these instead of var(--lime) or var(--periwinkle) on theme-adaptive surfaces. For fixed-context surfaces (always-dark nav, always-light tooltips, brand gradients), use the raw palette color with a "design-lint: allow" comment. */ --accent: var(--lime); --accent-surface: var(--lime); --accent-border: var(--lime); --accent-btn-text: var(--navy); /* Text on accent-colored buttons */ /* ---- State Colors ---- */ /* --interactive is the brand interactive state (periwinkle in both themes). It is NOT the same as --accent, which swaps lime/periwinkle per theme. Same hex value, different semantic purpose. */ --interactive: #6663FD; --pressed: #524FE0; --disabled: #5A5E66; --error: #E57373; --success: #81C784; /* ---- Amber (kept for premium/alerts) ---- */ --amber-gold: #F2B705; /* ---- Competitor Context (Plus feature — "show competitors" highlight) ---- `--competitor` is the single knob for tweaking the coral accent. Derived tokens use color-mix() so any change to --competitor propagates automatically to past-state, tint, and pill border. */ --competitor: #FF7A66; /* Warm coral — dark-theme default */ --competitor-outline-width: 2px; --competitor-outline-offset: calc(-1 * var(--competitor-outline-width)); --competitor-past: color-mix(in srgb, var(--competitor) 55%, transparent); --competitor-tint: color-mix(in srgb, var(--competitor) 18%, transparent); --competitor-pill-border: color-mix(in srgb, var(--competitor) 60%, transparent); /* ---- Past-event (dark surface) ---- */ --past-text: #6A6E76; --past-text-light: #565A62; --past-shadow: none; /* ---- Spinner ---- */ --spinner-track: rgba(255, 255, 255, 0.15); /* ---- CTA button glow ---- */ --shadow-cta: 0px 6px 20px rgba(233, 252, 135, 0.25); --shadow-cta-pressed: 0px 4px 12px rgba(233, 252, 135, 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); /* ---- Semantic Accent ---- */ --accent: var(--periwinkle); --accent-surface: var(--periwinkle); --accent-border: var(--periwinkle); --accent-btn-text: #FFFFFF; /* ---- 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); /* ---- 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; /* ---- Competitor Context override ---- Deeper coral for contrast against white card surface (WCAG AA non-text ≥3:1). Derived tokens (--competitor-past, --competitor-tint, --competitor-pill-border) auto-update via the color-mix chain in :root — no need to re-declare. */ --competitor: #D63B2E; /* ---- 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 ---- */ /* TODO: hardcoded periwinkle rgba — lint can't catch these. Future: token-ize. */ --focus-ring: 0 0 0 2px rgba(102, 99, 253, 0.20); /* ---- Spinner ---- */ --spinner-track: rgba(0, 0, 0, 0.12); }