/* =========================================================================
   tg-tokens.css — LES jetons de TERANGAMING, un seul fichier pour l'espace
   de gestion (tg-admin.css) et pour le site public (tg-site.css).

   Refonte du 09/10/2026 (Tom) : la sobriété des plateformes d'échange,
   densité d'information, aucun décor. Le jaune TERANGAMING est un accent
   (bouton principal, élément actif) ; le vert et le rouge disent un état
   (compatible ou non, en stock ou en rupture, gain ou perte), jamais un décor.

   Deux noms pour chaque valeur : --tg-* (site public, configurateur) et les
   noms historiques de l'espace (--fond, --surface...). Une valeur se change
   ici, et seulement ici.
   ========================================================================= */
:root {
  /* Fonds et surfaces */
  --tg-fond:          #0B0E11;
  --tg-surface:       #181A20;
  --tg-surface-2:     #1E2329;
  --tg-survol:        #2B3139;
  --tg-bord:          #2B3139;
  --tg-bord-fort:     #474D57;

  /* Texte (contraste vérifié sur #181A20 : 15,8:1, 5,4:1) */
  --tg-texte:         #EAECEF;
  --tg-texte-2:       #848E9C;
  --tg-texte-3:       #848E9C;

  /* Accent et états */
  --tg-accent:        #E8C400;
  --tg-accent-survol: #D1B000;
  --tg-accent-voile:  rgba(232, 196, 0, .12);
  --tg-sur-accent:    #0B0E11;
  --tg-vert:          #0ECB81;
  --tg-vert-voile:    rgba(14, 203, 129, .12);
  --tg-rouge:         #F6465D;
  --tg-rouge-voile:   rgba(246, 70, 93, .12);
  --tg-orange:        #F0B90B;
  --tg-orange-voile:  rgba(240, 185, 11, .12);

  /* Typographie : IBM Plex Sans, chiffres en colonnes partout */
  --tg-police: 'IBM Plex Sans', 'Plex', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Grille de 8 px, rayons de 4 px (boutons, champs) à 8 px (cartes) */
  --tg-1: 4px;  --tg-2: 8px;  --tg-3: 12px; --tg-4: 16px; --tg-5: 24px; --tg-6: 32px; --tg-7: 48px;
  --tg-r-petit: 4px;
  --tg-r:       8px;
  --tg-vif: 120ms cubic-bezier(.2, .6, .3, 1);

  /* Noms historiques de l'espace de gestion */
  --fond:           var(--tg-fond);
  --surface:        var(--tg-surface);
  --surface-haute:  var(--tg-surface-2);
  --surface-survol: var(--tg-survol);
  --bordure:        var(--tg-bord);
  --bordure-forte:  var(--tg-bord-fort);
  --texte:          var(--tg-texte);
  --texte-2:        var(--tg-texte-2);
  --texte-3:        var(--tg-texte-3);
  --accent:         var(--tg-accent);
  --accent-sombre:  var(--tg-accent-survol);
  --accent-voile:   var(--tg-accent-voile);
  --sur-accent:     var(--tg-sur-accent);
  --positif:        var(--tg-vert);
  --positif-voile:  var(--tg-vert-voile);
  --attente:        var(--tg-orange);
  --attente-voile:  var(--tg-orange-voile);
  --alerte:         var(--tg-rouge);
  --alerte-voile:   var(--tg-rouge-voile);
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px;
  --arrondi:    8px;
  --arrondi-sm: 4px;
  --arrondi-lg: 8px;
  --police: var(--tg-police);
}