/* ════════════════════════════════════════════════════════════════════ ScoutApp · THEME CONTRACT (single source of truth for alle kleuren) ──────────────────────────────────────────────────────────────────── TWEE ASSEN op : • data-theme = het THEMA (palet). Standaard = "default" (dit bestand). • data-mode = de MODUS. "light" | "dark". ELK thema heeft dus een light- én een dark-variant. Werking (3 lagen): 1. CONTRACT — de token-NAMEN hieronder. Veranderen bijna nooit. 2. BASE — het standaard-thema vult de waardes per modus: :root = standaard-thema · DARK (+ FOUC-fallback) [data-mode=light]= standaard-thema · LIGHT 3. EXTRA THEMA — voeg toe met EIGEN waardes per modus (mag partieel zijn, niet-gezette tokens vallen terug op het standaard-thema): [data-theme="naam"] { … } -> dark [data-theme="naam"][data-mode="light"] { … } -> light (Club-thema's overschrijven straks bv. alléén de accent-familie.) Code/componenten verwijzen UITSLUITEND via var(--sa-*) — nooit kale hex. --sa-font staat in app.css (thema-onafhankelijk). Claude Design-workflow: geef Design de tokenlijst als spec; plak de teruggekomen waardes als nieuw thema-blok (dark + light). Zie THEME.md. ════════════════════════════════════════════════════════════════════ */ /* Standaard-thema · DARK — "Court & Leather". Ook de veilige default zodat de eerste paint nooit wit flitst, ook als het init-script (nog) niet liep. */ :root { color-scheme: dark; /* ── Oppervlakken ── */ --sa-bg: #0B1524; --sa-surface: #13243A; --sa-surface-hover: #1C3149; --sa-surface-2: #172B43; --sa-panel: #101D2F; /* dropdown-panels, modals, zoek-cards */ --sa-topbar: #07101C; /* app-topbar — blijft donker in beide modi */ --sa-border: #2A3D58; --sa-border-soft: #1B2C42; --sa-placeholder: #213349; /* neutrale fill achter logo-/foto-placeholders */ --sa-input-bg: #182C44; --sa-input-border: #314A6A; /* ── Tekst ── */ --sa-text: #FAF5EC; --sa-text-muted: #ADA693; --sa-text-dim: #9A9482; /* AA-opgehoogd (≥4.5 op surfaces) */ --sa-on-accent: #FFFFFF; /* tekst op gekleurde knoppen (accent/info/danger) */ /* ── Accent (oranje — "Court & Leather") ── */ --sa-accent: #E5662E; --sa-accent-hover: #EF9D72; --sa-accent-soft: #36231A; --sa-accent-dark: #B84A1E; /* ── Semantisch ── */ --sa-info: #1565C0; --sa-info-hover: #1976D2; --sa-warn: #FFB300; --sa-danger: #C62828; --sa-danger-hover: #E53935; --sa-danger-soft: #5A2222; /* ── Tonen (status-/seizoen-badges, chips, feedback). bg = vlak, fg = tekst. ── */ --sa-blue-bg: #16263E; --sa-blue-fg: #8FC6F5; --sa-blue-border: #2E456A; --sa-green-bg: #16301C; --sa-green-fg: #9BD3A0; --sa-green-border: #2C5A33; --sa-red-bg: #3E1A1A; --sa-red-fg: #F0A0A0; --sa-amber-bg: #33270F; --sa-amber-fg: #FFCF7A; /* ── Schaduw ── */ --sa-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); --sa-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); /* ── Radii (modus-onafhankelijk) ── */ --sa-radius: 8px; --sa-radius-sm: 6px; --sa-radius-xs: 4px; } /* ════════════════════════════════════════════════════════════════════ Standaard-thema · LIGHT — "Clean Sideline". De topbar blijft bewust donker. ════════════════════════════════════════════════════════════════════ */ [data-mode="light"] { color-scheme: light; --sa-bg: #EFEADF; /* iets dieper zodat kaarten loskomen */ --sa-surface: #FFFFFF; --sa-surface-hover: #EAE3D5; --sa-surface-2: #FAF6EE; --sa-panel: #FFFFFF; --sa-topbar: #07101C; --sa-border: #CFC5B2; /* duidelijk zichtbare kaders (1.7:1 op wit) */ --sa-border-soft: #E0D9CB; --sa-placeholder: #ECE4D6; --sa-input-bg: #FFFFFF; --sa-input-border: #D8CFBE; --sa-text: #16293F; --sa-text-muted: #5C6F87; --sa-text-dim: #677286; /* AA-opgehoogd (≥4.5 op bg/surface) */ --sa-on-accent: #FFFFFF; --sa-accent: #B84A1E; --sa-accent-hover: #A23F17; --sa-accent-soft: #FCE9DD; --sa-accent-dark: #B84A1E; --sa-info: #1565C0; --sa-info-hover: #1976D2; --sa-warn: #A66200; --sa-danger: #C62828; --sa-danger-hover: #E53935; --sa-danger-soft: #F6DADA; --sa-blue-bg: #E3EDFB; --sa-blue-fg: #1565C0; --sa-blue-border: #B9D4F5; --sa-green-bg: #E6F4EA; --sa-green-fg: #2C7430; --sa-green-border: #BCDFC2; --sa-red-bg: #FBE3E3; --sa-red-fg: #C62828; --sa-amber-bg: #FDF0D5; --sa-amber-fg: #8F5400; --sa-shadow: 0 6px 18px rgba(22, 41, 63, 0.10); --sa-shadow-lg: 0 18px 48px rgba(22, 41, 63, 0.18); }