/* ============================================================ ScoreChom — Design Variables (single source of truth) ------------------------------------------------------------ Edit anything here and it changes everywhere site- and app-wide. Nothing else should hard-code colours or sizes. Dark theme is the default. Light theme overrides live in the [data-theme="light"] block at the bottom of this file. ============================================================ */ :root { /* ---- BRAND COLOURS ---- The five colours of ScoreChom. Change these and the whole site re-skins. Keep them in this order: orange (action), green (sport), yellow (warm accent), navy (ground), red (love). */ --brand-orange: #FF5533; /* primary CTA, ScoreChom wordmark "Chom", price tags */ --brand-orange-deep: #D9411D; /* hover / pressed state */ --brand-orange-soft: #FF7A55; /* subtle highlights, borders */ --pitch-green: #19B86A; /* success, "REAL-TIME", ticks */ --pitch-green-deep: #087244; /* brush-stroke header band, deep accents */ --pitch-green-soft: rgba(25, 184, 106, 0.16); --brand-yellow: #F6C445; /* the soft "they love" cursive yellow (NOT shocking) */ --brand-yellow-soft: rgba(246, 196, 69, 0.18); --brand-navy: #070B18; /* base background (dark theme) */ --brand-navy-2: #101A32; /* card surface (dark theme) */ --brand-navy-3: #18233F; /* raised surface */ --heart-red: #E63946; /* the ♥ in "they love" */ /* ---- SEMANTIC ALIASES ---- Components reference these so a "primary button" can stay a primary button even if the brand colour changes. */ --brand: var(--brand-orange); --brand-deep: var(--brand-orange-deep); --accent: var(--pitch-green); --accent-deep: var(--pitch-green-deep); --highlight: var(--brand-yellow); --success: var(--pitch-green); --warning: var(--brand-yellow); --error: #EF4444; --info: #2F9DFF; /* ---- SURFACES & TEXT (dark theme default) ---- */ --bg: var(--brand-navy); --bg-2: var(--brand-navy-2); --surface: rgba(255, 255, 255, 0.04); --surface-strong: rgba(255, 255, 255, 0.08); --card: var(--brand-navy-2); --card-strong: var(--brand-navy-3); --ink: #F8FBFF; /* primary text on dark */ --ink-2: #C3CEE4; /* secondary text */ --ink-muted: #8F9CB7; /* hints, captions */ --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.22); /* ---- BRAND ASSETS ---- Swap the logo or hero banner site-wide by changing these. */ --logo-url: url("../../logo.png"); --logo-mark-url: url("../../logo.png"); --hero-image-url: url("../images/hero/hero-main.jpg"); --brush-green-url: url("../images/brand/brush-green.png"); --brush-orange-url: url("../images/brand/brush-orange.png"); /* ---- TYPOGRAPHY ---- */ --font-display: "Barlow Condensed", system-ui, sans-serif; --font-body: "Barlow", system-ui, sans-serif; --font-script: "Caveat", "Comic Sans MS", cursive; /* the "they love" handwriting */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px; --fs-3xl: 48px; --fs-4xl: 64px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.55; /* ---- SPACING SCALE ---- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---- RADII ---- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; /* ---- SHADOWS ---- */ --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.18); --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.28); --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.36); --shadow-glow-orange: 0 0 24px rgba(255, 85, 51, 0.45); --shadow-glow-green: 0 0 24px rgba(25, 184, 106, 0.40); /* ---- LAYOUT ---- */ --container-sm: 720px; --container-md: 960px; --container-lg: 1180px; --container-xl: 1320px; --header-height: 72px; --header-height-mobile: 60px; /* ---- MOTION ---- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; /* ---- Z-INDEX ---- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 2000; } /* ============================================================ LIGHT THEME OVERRIDES Only the values that differ from dark live here. Toggle by setting . ============================================================ */ :root[data-theme="light"] { --bg: #F7F1E8; /* warm off-white (matches PDF light passages) */ --bg-2: #EFE7DB; --surface: rgba(7, 11, 24, 0.04); --surface-strong: rgba(7, 11, 24, 0.08); --card: #FFFFFF; --card-strong: #FFFFFF; --ink: #101827; --ink-2: #3B475C; --ink-muted: #657087; --line: rgba(7, 11, 24, 0.12); --line-strong: rgba(7, 11, 24, 0.22); --shadow-sm: 0 4px 10px rgba(7, 11, 24, 0.08); --shadow-md: 0 12px 28px rgba(7, 11, 24, 0.10); --shadow-lg: 0 28px 70px rgba(7, 11, 24, 0.14); } /* Respect OS preference on first load when no explicit theme set. */ @media (prefers-color-scheme: light) { :root:root:not([data-theme="dark"]):not([data-theme="light"]) { --bg: #F7F1E8; --bg-2: #EFE7DB; --surface: rgba(7, 11, 24, 0.04); --surface-strong: rgba(7, 11, 24, 0.08); --card: #FFFFFF; --card-strong: #FFFFFF; --ink: #101827; --ink-2: #3B475C; --ink-muted: #657087; --line: rgba(7, 11, 24, 0.12); --line-strong: rgba(7, 11, 24, 0.22); --shadow-sm: 0 4px 10px rgba(7, 11, 24, 0.08); --shadow-md: 0 12px 28px rgba(7, 11, 24, 0.10); --shadow-lg: 0 28px 70px rgba(7, 11, 24, 0.14); } }