/* ============================================================ tokens.css — Design System MyGamingTips Source de vérité : DESIGN.md officiel de l'app. La nuit est la vedette (défaut), le jour est le repli. ============================================================ */ :root { /* ---------- Néons (brand colors, constants jour/nuit) ---------- Seule l'intensité/alpha s'adapte, jamais la valeur hex. */ --neon-violet: #8A2BE2; /* accent principal nuit */ --neon-cyan: #00E5FF; /* secondary, halos, grille */ --neon-magenta:#FF2D95; /* ambiance, accents ponctuels — jamais texte */ --neon-green: #39FF14; /* rare : réussite, validation */ --plus-violet: #B026FF; /* marque premium */ --plus-gold: #FFC93C; /* couronnes, VIP */ /* Couleurs de catégorie (toujours doublées icône + label) */ --cat-video: #FF2D55; /* rouge */ --cat-guide: #34C759; /* vert */ --cat-link: #00A3FF; /* bleu */ /* ---------- Rayons ---------- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 16px; --radius-pill: 20px; /* ---------- Espacements ---------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; --space-3xl: 64px; /* ---------- Typographie ---------- Une seule famille exploitée par le contraste de poids. CJK + Arabe en fallback (cf. base.css @font-face import). */ --font-sans: "Roboto", "Noto Sans Arabic", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif; --fw-regular: 400; --fw-bold: 700; --fw-black: 800; --fs-display: clamp(2rem, 8vw, 3rem); --fs-headline: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); --fs-title: 1rem; --fs-body: 0.875rem; --fs-label: 0.8125rem; --fs-small: 0.75rem; --lh-tight: 1.1; --lh-body: 1.4; --ls-headline: 0.3px; --ls-label: 0.6px; /* ---------- Layout ---------- */ --container-max: 1200px; --container-narrow: 760px; --header-h: 64px; /* ---------- Transitions ---------- */ --t-fast: 120ms ease-out; --t-theme: 200ms ease-out; /* crossfade jour/nuit */ --t-pulse: 1600ms ease-in-out; /* pulsation néon */ /* ---------- Halos néon constants (legacy, non utilisés par .gbg) ---------- NOTE V3 : les halos actifs du fond sont --halo-a/b/c/d (définis plus bas dans le bloc DARK par défaut, alpha jusqu'à 0.30 pour l'effet arcade). Ces trois tokens ci-dessous sont conservés pour compat et non référencés. */ --halo-violet: rgba(138, 43, 226, 0.12); --halo-cyan: rgba(0, 229, 255, 0.10); --halo-magenta:rgba(255, 45, 149, 0.10); /* Halo bouton actif (box-shadow double couche, cf. Elevation) */ --glow-violet: 0 0 0 1px rgba(138, 43, 226, 0.6), 0 0 24px rgba(138, 43, 226, 0.35); --glow-cyan: 0 0 0 1px rgba(0, 229, 255, 0.55), 0 0 22px rgba(0, 229, 255, 0.28); --glow-plus: 0 0 0 1px rgba(255, 201, 60, 0.7), 0 0 28px rgba(176, 38, 255, 0.4); /* V3 — Contours néon (mode dark uniquement au rendu, mais les tokens vivent ici car :root est désormais DARK par défaut ; ils seront neutralisés par [data-theme="light"] plus bas). */ --border-neon: 1px solid rgba(138, 43, 226, 0.35); --border-neon-cyan: 1px solid rgba(0, 229, 255, 0.30); --glow-card: 0 0 0 1px rgba(138, 43, 226, 0.25), 0 0 20px rgba(138, 43, 226, 0.15); --glow-card-hover: 0 0 0 1px rgba(138, 43, 226, 0.6), 0 0 30px rgba(138, 43, 226, 0.35); /* ============================================================ V3 (Chantier 5) — :root = DARK par défaut. Même sans JavaScript, le site est en mode nuit (anti-flash). Toutes les variables "thémables" du mode nuit vivent ici. ============================================================ */ --bg: #070912; /* Encre Nuit */ --surface: rgba(16, 19, 31, 0.86); /* Surface Nuit, alpha 0.86 */ --surface-solid: #10131F; --surface-alt: #181C2B; /* Surface Alt Nuit */ --text-primary: #EAF0FF; /* ~16:1 */ --text-secondary: #9AA3BD; /* ~7:1 */ --border: #262C40; --border-strong: #3A4159; --accent: var(--neon-violet); --accent-2: var(--neon-cyan); --accent-rgb: 138, 43, 226; --chip-bg: var(--surface-alt); --chip-border: var(--border); /* Grille de fond gaming (V3 : halos intensifiés) */ --grid-line: rgba(0, 229, 255, 0.08); --halo-a: rgba(138, 43, 226, 0.30); --halo-b: rgba(0, 229, 255, 0.22); --halo-c: rgba(255, 45, 149, 0.22); --halo-d: rgba(57, 255, 20, 0.10); /* V3 : 4e halo vert néon subtil */ --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.35); --selection-bg: rgba(138, 43, 226, 0.35); --selection-text: #EAF0FF; --scroll-thumb: #2A3046; --scroll-track: transparent; color-scheme: dark; } /* ============================================================ MODE NUIT (primaire — la vedette) V3 : toutes les variables nuit vivent sur :root (anti-flash, DARK par défaut). Ce sélecteur reste pour l'explicité et la spécificité, mais ne redéfinit RIEN pour ne pas écraser :root. ============================================================ */ [data-theme="dark"] { /* Hérite intégralement de :root (DARK par défaut). */ } /* ============================================================ MODE JOUR (repli — lisible, néon remplacé par violet profond) ============================================================ */ [data-theme="light"] { --bg: #F5F7FB; /* Papier Froid */ --surface: rgba(255, 255, 255, 0.94); --surface-solid: #FFFFFF; --surface-alt: #EEF1F7; /* Gris-Bleu Clair */ --text-primary: #11131A; /* Encre */ --text-secondary: #5A6172; /* Ardoise */ --border: #D9DEE9; --border-strong: #C2C9D8; --accent: #6A11CB; /* Accent Jour = Violet Profond */ --accent-2: #6A11CB; --accent-rgb: 106, 17, 203; --chip-bg: var(--surface-alt); --chip-border: var(--border); --grid-line: rgba(106, 17, 203, 0.04); --halo-a: rgba(106, 17, 203, 0.10); --halo-b: rgba(106, 17, 203, 0.08); --halo-c: rgba(176, 38, 255, 0.08); --shadow-soft: 0 2px 6px rgba(17, 19, 26, 0.08); --selection-bg: rgba(106, 17, 203, 0.18); --selection-text: #11131A; --scroll-thumb: #C2C9D8; --scroll-track: transparent; /* V3 — En mode clair, on neutralise les tokens néon (pas de glow sur les cartes : le mode clair reste 100% inchangé visuellement). */ --border-neon: 1px solid var(--border); --border-neon-cyan: 1px solid var(--border); --glow-card: none; --glow-card-hover: none; color-scheme: light; } /* ============================================================ V3 (Chantier 5) — Plus de flash blanc au chargement. Le bloc @media (prefers-color-scheme: light) qui forçait le mode clair sur :root avant que JS ne pose data-theme a été SUPPRIMÉ : :root est désormais DARK par défaut (anti-flash), et le toggle jour/nuit du header reste fonctionnel pour qui veut le mode clair. ============================================================ */