/* ==========================================================================
   BETATHLON — TOKENS (site vitrine, standalone)
   Contrat recopié depuis la charte BETATHLON-CHARTE-TOKENS-V3 (skin « Or »).
   Règle d'or : un composant ne lit JAMAIS une valeur en dur, toujours var(--token).
   ========================================================================== */

:root {
  /* ---- Couleurs — rôles sémantiques (skin « Or ») ---- */
  --recompense:        #E8BD4E;  /* marque + récompense */
  --recompense-vive:   #FBE7A0;  /* éclat / état révélé */
  --recompense-ombre:  #A87E2C;  /* bordures, liserés */
  --recompense-metal:  linear-gradient(180deg, #FCEAA6 0%, #EFC658 46%, #B58A30 100%);

  --energie:           #4FA8FF;  /* énergie / mouvement — Moments only */
  --energie-blanc:     #FFFFFF;

  --fond:              #0A0A0A;
  --surface:           #111111;
  --surface-haute:     #1A1A1A;

  --texte:             #F5F5F0;
  --texte-attenue:     #8E8E93;
  --texte-faible:      #6A6A6A;

  --ligne:             #232323;
  --alerte:            #C23B3B;

  /* Alphas or récurrents (site) */
  --recompense-a10:    rgba(232, 189, 78, .10);
  --recompense-a18:    rgba(232, 189, 78, .18);
  --recompense-a30:    rgba(232, 189, 78, .30);
  --energie-a12:       rgba(79, 168, 255, .12);
  --energie-a25:       rgba(79, 168, 255, .25);

  /* ---- Typographie ---- */
  --font-display:      'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:         'Outfit', 'Helvetica Neue', sans-serif;

  /* Échelle typo (site, fluide desktop-first) */
  --text-hero:         clamp(3.4rem, 8.5vw, 7.5rem);
  --text-h2:           clamp(2.4rem, 5vw, 4.4rem);
  --text-h3:           clamp(1.5rem, 2.6vw, 2.1rem);
  --text-lead:         clamp(1.05rem, 1.5vw, 1.3rem);
  --text-body:         1rem;
  --text-small:        .875rem;
  --text-micro:        .78rem;

  /* ---- Intensités de Moments ---- */
  --glow-titre:        0 2px 26px rgba(212, 168, 67, .35);
  --bloom-recompense:  0 0 44px rgba(212, 168, 67, .16);
  --glow-laser:        0 0 24px rgba(79, 168, 255, .45);

  /* ---- Rayons ---- */
  --rayon-carte:       20px;
  --rayon-plaque:      11px;
  --rayon-bouton:      999px;
  --rayon-champ:       12px;

  /* ---- Espacements & layout (site) ---- */
  --space-1:           .5rem;
  --space-2:           1rem;
  --space-3:           1.5rem;
  --space-4:           2.5rem;
  --space-5:           4rem;
  --space-6:           6.5rem;
  --largeur-contenu:   1180px;
  --largeur-texte:     46rem;

  /* ---- Bordures shorthand ---- */
  --border-subtile:    1px solid rgba(255, 255, 255, .08);
  --border-carte:      1px solid #2A2A2A;
  --border-recompense: 1px solid var(--recompense-a30);

  /* ---- Mouvement ---- */
  --ease-sortie:       cubic-bezier(.16, 1, .3, 1);
  --duree-courte:      .25s;
  --duree-moyenne:     .6s;
  --duree-longue:      1.2s;
}