/* ============================================================================= NOVA SCORE — Brand & Theme Tokens ----------------------------------------------------------------------------- This is the SINGLE PLACE you edit colors, fonts, and core look-and-feel values for the entire site. Every page (standings, brackets, team detail, upset watch, kiosk) reads from these variables. How to change a color: 1. Find the variable below (e.g. --accent for the cyan highlight color). 2. Change the hex value. 3. Save, redeploy. Done — every page updates. Do NOT add new component styles in this file. Component CSS lives in index.html. This file is for TOKENS (named values) only. ============================================================================= */ /* ----------------------------------------------------------------------------- DARK MODE (default) These values apply when the page loads. Light mode overrides come below. ----------------------------------------------------------------------------- */ :root { /* ---- Brand colors (the ones you'll tweak most often) ---- */ --accent: #00d4ff; /* PRIMARY HIGHLIGHT — bracket borders, mode bar, active tab, "Tap to score" pill, upset cards */ --cyan: #00d4ff; /* Logo + headline gradient stop. Keep same as --accent unless you want them to diverge */ --purple: #7c5cfc; /* Secondary brand accent — headline gradient, season badge */ --green: #00e68a; /* Wins / positive / "good" stat color */ --red: #ff4d6a; /* Losses / negative / "bad" stat color */ --orange: #ff9f43; /* Warning / upcoming highlight */ --yellow: #ffd43b; /* Locked seed badge, attention pills */ --amber: #f59e0b; /* Secondary warning */ /* ---- Surfaces (backgrounds for the page and cards) ---- */ --navy: #0a1628; /* App background (the deep blue you see behind everything) */ --bg: var(--navy); /* Alias used by kiosk + status pill backgrounds */ --dark-bg: #080f1e; /* Slightly darker variant for nested surfaces */ --card: #111d35; /* Card background — game cards, standings rows, team detail panels */ --card-hover: #162544; /* Card background when hovered/tapped */ --surface: rgba(255,255,255,0.06); /* Translucent overlay surface — used by a couple of stat panels */ /* ---- Text ---- */ --text: #e8edf5; /* Primary text color (white-ish) */ --dim: #7a8ba8; /* Secondary text — labels, captions, metadata */ --muted: var(--dim); /* Alias for --dim, used by toast bodies and kiosk meta */ /* ---- Borders & dividers ---- */ --border: rgba(122,139,168,0.15); /* ---- Typography ---- */ --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-mono: 'Space Mono', monospace; --font-head: var(--font-body); /* Alias: kiosk H1 uses this. Override if you want a different heading face. */ /* ---- Geometry (shape + motion) ---- */ --radius: 12px; /* Card corner radius */ --radius-sm: 8px; /* Small element radius — pills, buttons */ --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1); /* Default ease for hover + state changes */ } /* ----------------------------------------------------------------------------- LIGHT MODE These values override the dark-mode tokens above when has class "light". Only redefine the tokens that need to differ — anything not listed here inherits its dark-mode value. ----------------------------------------------------------------------------- */ body.light { /* ---- Brand accent (darker so blue stays readable on white) ---- */ --accent: #0094c7; /* ---- Surfaces (flipped to light) ---- */ --navy: #f0f2f8; /* Page background becomes light gray-blue */ --card: #ffffff; /* Cards become white */ --card-hover: #e8ecf4; --dark-bg: #e4e8f0; --surface: rgba(0,0,0,0.04); /* ---- Text (flipped to dark on light) ---- */ --text: #1a2332; --dim: #5a6a7e; /* ---- Borders ---- */ --border: rgba(0,0,0,0.1); }