/* ============================================================ Charlotte VM 2026 — Theme tokens A playful football / summer / love palette built ON TOP of the Waye Design System foundations: • Typography: Source Sans 3 (Waye's canonical face) • Spacing: Waye's 4px base scale • Love-rose accent is a bolder cousin of Waye's rose family Colors, radii and motion are warmer & more playful than Waye's B2B house style, per the brief (grass, gold, sun, hearts). ============================================================ */ @import url("/app/fonts/source-sans-3-local.css"); :root { /* ---- Pitch green (grass) ---- */ --green-900: #06371F; --green-800: #0A4A2A; --green-700: #0E5C34; --green-600: #137A43; --green-500: #1B9B54; --green-400: #3FBE72; --green-300: #8BE0AB; --green-100: #DBF4E5; /* ---- Sun / gold ---- */ --gold-700: #B8860B; --gold-600: #E0A912; --gold-500: #F4C430; /* primary sun gold */ --gold-400: #FFD95A; --gold-200: #FFEDAE; --gold-100: #FFF6D9; /* ---- Love rose (bolder cousin of Waye rose) ---- */ --love-700: #B22A52; --love-600: #E23E6B; /* primary love accent */ --love-500: #FF5C86; --love-400: #FF85A4; --love-200: #FFC9D8; --love-100: #FFE6EE; /* ---- Sunset coral (warmth) ---- */ --coral-600: #E8612C; --coral-500: #FF7A45; --coral-300: #FFB088; /* ---- Sweden ---- */ --se-blue: #0061B0; --se-blue-d: #00457E; --se-yellow: #FFCD00; /* ---- Warm neutrals (cream paper) ---- */ --ink: #1D1D1B; /* Waye ink */ --ink-soft: #4A453F; --paper: #FFF9F0; /* warm cream surface */ --paper-2: #FFF3E2; /* sunken warm */ --card: #FFFFFF; --line: #EFE6D7; --line-2: #E4D7C2; --muted: #948B7C; /* ---- Semantic ---- */ --win: #137A43; --draw: #B8860B; --loss: #C0392B; /* ---- Type (Waye face) ---- */ --font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---- Spacing (Waye 4px base) ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* ---- Radii (playful, softer than Waye) ---- */ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* ---- Shadow (warm, soft) ---- */ --sh-1: 0 1px 3px rgba(45,30,10,0.06); --sh-2: 0 6px 18px rgba(45,30,10,0.10); --sh-3: 0 16px 40px rgba(45,30,10,0.16); --sh-green: 0 12px 30px rgba(10,74,42,0.30); --sh-love: 0 12px 30px rgba(226,62,107,0.28); /* ---- Motion (Waye easings) ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-std: cubic-bezier(0.22, 0.61, 0.36, 1); /* ---- App theme hooks (overridden by Tweaks) ---- */ --brand-hero-1: var(--green-700); --brand-hero-2: var(--green-600); --brand-accent: var(--love-600); } /* Theme variants set on */ html[data-theme="gold"] { --brand-hero-1: #C98A0E; --brand-hero-2: #F4C430; } html[data-theme="sunset"] { --brand-hero-1: #E8612C; --brand-hero-2: #E23E6B; } html[data-theme="pitch"] { --brand-hero-1: var(--green-800); --brand-hero-2: var(--green-600); } * , *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Desktop staging backdrop behind the phone */ body { background: radial-gradient(1200px 700px at 50% -10%, #1b6b3e 0%, #0c3f25 45%, #07301d 100%); min-height: 100vh; } .h-tight { letter-spacing: -0.02em; } .tabnum { font-variant-numeric: tabular-nums; } ::selection { background: var(--love-200); color: var(--ink); } button { font-family: inherit; cursor: pointer; } /* Hide scrollbars inside the app shell but keep scrolling */ .no-sb { scrollbar-width: none; -ms-overflow-style: none; } .no-sb::-webkit-scrollbar { display: none; }