/* RLCoach — tokens de design
   Cible : Jinja2 + HTMX + Alpine.js + Chart.js. Aucun hex en dur dans les templates.
   Source de vérité : RLCoach.dc.html (écran « Design system »). */

:root {
  /* ── Surfaces (thème sombre par défaut, seul thème livré) ── */
  --c-bg:        #0A0E1C; /* fond de page */
  --c-bg-grad:   radial-gradient(1200px 600px at 80% -10%, #161C3E 0%, #0A0E1C 60%);
  --c-surface:   #111730; /* cartes, panneaux */
  --c-inset:     #0E1430; /* carte dans une carte, champs */
  --c-raised:    #182042; /* élévation / hover */
  --c-line:      #232B52; /* bordure par défaut */
  --c-line-2:    #2C3563; /* bordure accentuée (carte active) */
  --c-line-3:    #3A4370; /* bordure interactive (bouton secondaire) */
  --c-track:     #1B2348; /* fond de jauge / squelette */

  /* ── Texte ── */
  --c-text:      #EEF1FA; /* AA sur --c-bg */
  --c-text-2:    #B6BEDC; /* paragraphes */
  --c-muted:     #97A0C4; /* méta */
  --c-dim:       #5F6A96; /* labels majuscules, unités */

  /* ── Couleurs sémantiques (JAMAIS décoratives) ── */
  --c-player:    #4D8CFF; /* le joueur : ses valeurs, ses courbes */
  --c-rank:      #FF7A3D; /* la référence du rang : médiane, axes à travailler */
  --c-brand:     #9B6BFF; /* marque, CTA, éléments neutres de produit */
  --c-ok:        #3DD68C; /* progrès, victoire, validation */
  --c-warn:      #FFC53D; /* attente, doublon */
  --c-bad:       #FF5C6E; /* erreur, défaite */
  --c-bad-text:  #FF8A96; /* variante lisible sur fond sombre */
  --c-rank-text: #FFA678; /* variante lisible de --c-rank sur fond sombre */

  /* Percentiles — le seuil pilote la couleur ET le libellé (double codage) */
  --c-p-high:    var(--c-player); /* p >= 65 */
  --c-p-mid:     #8B94BC;         /* 45 <= p < 65 */
  --c-p-low:     var(--c-rank);   /* p < 45 */

  /* Rangs */
  --c-rank-gold:     #E0B24A;
  --c-rank-platinum: #7FD3E0;
  --c-rank-diamond:  #6B8BFF;
  --c-rank-champion: #A855F7;
  --c-rank-gc:       #FF5C6E;

  /* ── Typographie : 2 familles + le mono de la même superfamille ── */
  --ff-display: 'Space Grotesk', system-ui, sans-serif; /* titres, chiffres forts */
  --ff-body:    'IBM Plex Sans', system-ui, sans-serif; /* corps, tableaux, UI */
  --ff-mono:    'IBM Plex Mono', ui-monospace, monospace; /* codes, percentiles, deltas */

  --fs-display: clamp(34px, 5.4vw, 58px);
  --fs-h1:      28px;
  --fs-h2:      22px;
  --fs-h3:      18px;
  --fs-stat:    25px;  /* valeur d'une carte stat */
  --fs-body:    14px;
  --fs-sm:      13px;
  --fs-xs:      12px;
  --fs-label:   11px;  /* majuscules + letter-spacing .16em */
  --fs-micro:   10.5px;

  --lh-tight: 1.2;
  --lh-body:  1.6;
  --ls-tight: -0.02em;
  --ls-label: 0.16em;

  /* ── Espacements ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  /* ── Rayons ── */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* ── Élévation ── */
  --sh-glow: 0 24px 60px -30px rgba(77, 140, 255, .5);
  --sh-toast: 0 16px 40px -14px rgba(0, 0, 0, .6);
  --bd: 1px solid var(--c-line);

  /* ── Cibles tactiles (mobile = 50 % de l'audience) ── */
  --tap-min: 44px;
  --tap-cta: 52px;
}

/* Réglages globaux ------------------------------------------------------- */
body {
  margin: 0;
  background: var(--c-bg);
  background-image: var(--c-bg-grad);
  color: var(--c-text);
  font: 400 var(--fs-body)/var(--lh-body) var(--ff-body);
  -webkit-font-smoothing: antialiased;
}
a { color: #7FA8FF; text-decoration: none; }
a:hover { color: #A6C4FF; text-decoration: underline; }
:focus-visible { outline: 2px solid #7FA8FF; outline-offset: 2px; border-radius: var(--r-sm); }

/* Toute valeur numérique alignée utilise des chiffres tabulaires */
.num, td, th, .stat-value { font-variant-numeric: tabular-nums; }

/* Utilitaires de texte -------------------------------------------------- */
.label-caps {
  font: 600 var(--fs-label)/1 var(--ff-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-dim);
}

/* Animations utilisées par les squelettes et les entrées de contenu ------ */
@keyframes rl-shimmer { 0% { background-position: -420px 0 } 100% { background-position: 420px 0 } }
@keyframes rl-rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes rl-pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}