/* ═══════════════════════════════════════════════════════════════════ LELO BET — SYSTÈME DE THÈME (source unique des couleurs) ───────────────────────────────────────────────────────────────── RÈGLE ABSOLUE : aucun hex hors de ce fichier. Tout l'interface lit uniquement ces custom properties. Le Color Selector (src/theme.jsx) applique `data-theme` sur et peut surcharger chaque token à chaud (styles inline) — le rendu se re-teinte instantanément. 8 palettes « paris sportifs » inspirées du top mondial : a Graphite Émeraude (défaut — bet365 × DraftKings) b Nuit Marine / Ambre (FanDuel) c Carbone Safran (Parimatch × Betfair) d Forêt Nuit / Menthe (Stake) e Noir & Or Prestige (BetMGM × Caesars) f Bleu Live / Cyan (bwin × 1xBet) g Ardent Carbone (Pinnacle) h Clair Sable / Vert (Unibet — mode clair) Contraste AA (≥ 4.5:1) vérifié pour cotes / montants / soldes. ═══════════════════════════════════════════════════════════════════ */ /* ── Tokens structurels (identiques pour tous les thèmes) ────────── */ :root { /* Rayons : 14 (cartes) / 8 (contrôles) */ --radius: 14px; --radius-s: 8px; --radius-xs: 6px; /* Espacements : 4 / 8 / 16 / 24 / 32 / 48 */ --sp-05: 4px; --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; /* Typographie — ZÉRO webfont téléchargée */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; /* Encre constante sur fonds saturés (boutons danger/ok, pastilles). Identique sur tous les thèmes : blanc = lisible sur vert/rouge. */ --ink-on-fill: #FFFFFF; /* Cibles & couches */ --tap: 48px; --header-h: 56px; --nav-h: 62px; --side-w: 232px; --rail-w: 340px; --page-max: 1120px; --z-header: 40; --z-sticky: 50; --z-sheet: 80; --z-modal: 90; --z-toast: 100; --z-fab: 70; /* Couleurs du mode sombre par défaut (thème A appliqué si aucun attribut data-theme — voir sélecteur ci-dessous) */ color-scheme: dark; } /* ── A · Graphite Émeraude — DÉFAUT (bet365 × DraftKings, moderne) ─ */ :root, [data-theme="a"] { --bg: #0B0F14; --surface: #141A22; --surface-2: #1B2430; --primary: #00A97F; /* émeraude : argent / CTA */ --primary-ink: #04150F; /* texte sur primaire */ --accent: #C7F000; /* volt : promo / highlight / boost */ --accent-ink: #1A2000; --success: #2AB96B; /* gain / cote qui monte */ --danger: #E5484D; /* erreur / cote qui baisse / retrait bloqué */ --warning: #E7A03C; /* attente / double-contrôle / cote modifiée */ --live: #FF3B5C; /* point DIRECT / pulsation */ --ink: #F2F6F9; --ink-soft: #97A6B5; --line: #222D3A; --shadow-1: 0 6px 20px rgba(0, 0, 0, .35); --shadow-2: 0 14px 44px rgba(0, 0, 0, .5); color-scheme: dark; } /* ── B · Nuit Marine / Ambre (FanDuel) ───────────────────────────── */ [data-theme="b"] { --bg: #0A1128; --surface: #101A33; --surface-2: #182444; --primary: #F5A623; --primary-ink: #221303; --accent: #37C6FF; --accent-ink: #032230; --success: #2AB96B; --danger: #E5484D; --warning: #E7A03C; --live: #FF3B5C; --ink: #EDF2FC; --ink-soft: #94A5C8; --line: #1F2C50; --shadow-1: 0 6px 20px rgba(2, 8, 30, .4); --shadow-2: 0 14px 44px rgba(2, 8, 30, .55); color-scheme: dark; } /* ── C · Carbone Safran (Parimatch × Betfair) ────────────────────── */ [data-theme="c"] { --bg: #101014; --surface: #17171D; --surface-2: #1F1F27; --primary: #F0A500; --primary-ink: #201302; --accent: #FFE066; --accent-ink: #201502; --success: #35C26E; --danger: #E5484D; --warning: #E7A03C; --live: #FF3B5C; --ink: #F5F5F7; --ink-soft: #A0A0AC; --line: #262630; --shadow-1: 0 6px 20px rgba(0, 0, 0, .4); --shadow-2: 0 14px 44px rgba(0, 0, 0, .55); color-scheme: dark; } /* ── D · Forêt Nuit / Menthe (Stake) ─────────────────────────────── */ [data-theme="d"] { --bg: #0A120C; --surface: #101A13; --surface-2: #16251A; --primary: #3DDC84; --primary-ink: #032012; --accent: #B9FF66; --accent-ink: #132502; --success: #2AB96B; --danger: #E5484D; --warning: #E7A03C; --live: #FF3B5C; --ink: #EAF6EE; --ink-soft: #8FAF9C; --line: #1C2E21; --shadow-1: 0 6px 20px rgba(0, 10, 4, .4); --shadow-2: 0 14px 44px rgba(0, 10, 4, .55); color-scheme: dark; } /* ── E · Noir & Or Prestige (BetMGM × Caesars) ───────────────────── */ [data-theme="e"] { --bg: #0A0A0C; --surface: #131317; --surface-2: #1B1B21; --primary: #E7B84C; --primary-ink: #221703; --accent: #F5E7C6; --accent-ink: #2B2110; --success: #2AB96B; --danger: #E5484D; --warning: #E7A03C; --live: #FF3B5C; --ink: #F5F2EA; --ink-soft: #A39E90; --line: #26262E; --shadow-1: 0 6px 20px rgba(0, 0, 0, .45); --shadow-2: 0 14px 44px rgba(0, 0, 0, .6); color-scheme: dark; } /* ── F · Bleu Live / Cyan (bwin × 1xBet) ─────────────────────────── */ [data-theme="f"] { --bg: #071021; --surface: #0C1930; --surface-2: #122440; --primary: #2F80ED; --primary-ink: #FFFFFF; --accent: #22D3EE; --accent-ink: #02282E; --success: #2AB96B; --danger: #F0544F; --warning: #E7A03C; --live: #FF3B5C; --ink: #EAF1FB; --ink-soft: #8CA3C0; --line: #1B2C48; --shadow-1: 0 6px 20px rgba(1, 6, 18, .45); --shadow-2: 0 14px 44px rgba(1, 6, 18, .6); color-scheme: dark; } /* ── G · Ardent Carbone (Pinnacle) ───────────────────────────────── */ [data-theme="g"] { --bg: #0D0D0F; --surface: #151518; --surface-2: #1D1D22; --primary: #FF6A3D; --primary-ink: #2B0D00; --accent: #FFB020; --accent-ink: #241502; --success: #2AB96B; --danger: #E5484D; --warning: #E7A03C; --live: #FF3B5C; --ink: #F3F3F5; --ink-soft: #9C9CA6; --line: #252530; --shadow-1: 0 6px 20px rgba(0, 0, 0, .42); --shadow-2: 0 14px 44px rgba(0, 0, 0, .58); color-scheme: dark; } /* ── H · Clair Sable / Vert Paris (Unibet — mode clair) ──────────── */ [data-theme="h"] { --bg: #F2F5F8; --surface: #FFFFFF; --surface-2: #E9EFF4; --primary: #0B8457; --primary-ink: #FFFFFF; --accent: #B45309; --accent-ink: #FFFFFF; --success: #0E7A46; --danger: #C92A2A; --warning: #B7791F; --live: #DC2626; --ink: #101C28; --ink-soft: #51637A; --line: #DCE4EC; --shadow-1: 0 2px 10px rgba(16, 28, 40, .08); --shadow-2: 0 10px 30px rgba(16, 28, 40, .14); color-scheme: light; }