/* ══════════════════════════════════════════════════════════════════════════
   tigrebois.fr — tokens.css
   SOURCE DE VÉRITÉ du design system. Aucune valeur de couleur, d'espacement,
   de rayon, d'ombre ou de durée ne doit être écrite en dur ailleurs.
   Direction artistique : « Masters éditorial » — ivoire dominant, vert Masters
   pour les sections pleines, orange tigre en ponctuation, or mat pour les trophées.
   Propriétaire du fichier : agent Fondation CSS.
   ══════════════════════════════════════════════════════════════════════════ */

:root{

  /* ── Fonds ─────────────────────────────────────────────────────────────── */
  --tb-ivoire:       #F5F2E9;   /* fond dominant du site */
  --tb-ivoire-alt:   #EFEAD9;   /* section alternée, lignes paires de tableau */
  --tb-blanc:        #FFFDF8;   /* cartes et surfaces surélevées */

  /* ── Verts ─────────────────────────────────────────────────────────────── */
  --tb-vert:         #14532D;   /* vert Masters — sections pleines, titres */
  --tb-vert-profond: #0B2E1B;   /* sections les plus sombres, pied de page */
  --tb-vert-clair:   #1F7A45;   /* accents sur fond vert, barres de points */
  --tb-vert-pale:    #E3EDE4;   /* fonds de badge, survol de ligne */

  /* ── Accents ───────────────────────────────────────────────────────────── */
  --tb-orange:       #E8761E;   /* accent principal, CTA, liseré actif */
  --tb-orange-pale:  #FBEBDC;
  --tb-or:           #B8912F;   /* trophées, casquette verte, 1re place */
  --tb-or-clair:     #E3C567;
  --tb-argent:       #98A2A8;
  --tb-bronze:       #A9713F;

  /* ── Texte ─────────────────────────────────────────────────────────────── */
  --tb-encre:        #12201A;   /* texte courant sur fond clair */
  --tb-encre-70:     rgba(18,32,26,.70);
  --tb-encre-45:     rgba(18,32,26,.45);
  --tb-creme:        #F2EFE6;   /* texte sur fond vert */
  --tb-creme-70:     rgba(242,239,230,.72);

  /* ── Traits ────────────────────────────────────────────────────────────── */
  --tb-ligne:        rgba(18,32,26,.10);
  --tb-ligne-forte:  rgba(18,32,26,.18);
  --tb-ligne-claire: rgba(242,239,230,.16);  /* sur fond vert */

  /* ── Familles typographiques ─────────────────────────────────────────────
     La gothique est STRICTEMENT réservée au mot-marque « Tigre Bois »
     et aux initiales des avatars. */
  --tb-font-titre:    'Cal Sans', 'Trebuchet MS', system-ui, sans-serif;
  --tb-font-texte:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tb-font-gothique: 'Old English Text MT', 'Gothique secours', 'Cal Sans', serif;

  /* ── Échelle typographique fluide ──────────────────────────────────────── */
  --tb-t-display: clamp(2.75rem, 1.5rem + 5.2vw, 6rem);
  --tb-t-h1:      clamp(2.1rem,  1.4rem + 3.1vw, 3.75rem);
  --tb-t-h2:      clamp(1.65rem, 1.2rem + 2.0vw, 2.6rem);
  --tb-t-h3:      clamp(1.2rem,  1.05rem + .7vw, 1.55rem);
  --tb-t-corps:   1.0625rem;
  --tb-t-petit:   .875rem;
  --tb-t-micro:   .75rem;

  /* ── Espacements ───────────────────────────────────────────────────────── */
  --tb-e1:4px;  --tb-e2:8px;  --tb-e3:12px; --tb-e4:16px; --tb-e5:20px;
  --tb-e6:24px; --tb-e7:32px; --tb-e8:40px; --tb-e9:56px; --tb-e10:72px;
  --tb-e11:96px; --tb-e12:128px;

  /* ── Rayons ────────────────────────────────────────────────────────────── */
  --tb-r1:6px; --tb-r2:10px; --tb-r3:16px; --tb-r4:24px; --tb-r5:32px; --tb-rond:999px;

  /* ── Ombres ────────────────────────────────────────────────────────────── */
  --tb-ombre1:0 1px 2px rgba(18,32,26,.05), 0 2px 8px rgba(18,32,26,.04);
  --tb-ombre2:0 2px 4px rgba(18,32,26,.05), 0 12px 28px rgba(18,32,26,.08);
  --tb-ombre3:0 8px 16px rgba(18,32,26,.06), 0 28px 64px rgba(18,32,26,.12);

  /* ── Mouvement ─────────────────────────────────────────────────────────── */
  --tb-ease:      cubic-bezier(.2,.7,.2,1);     /* signature du site */
  --tb-ease-sort: cubic-bezier(.16,1,.3,1);
  --tb-d1:180ms; --tb-d2:420ms; --tb-d3:720ms;

  /* ── Gabarit ───────────────────────────────────────────────────────────── */
  --tb-conteneur:1200px; --tb-conteneur-large:1420px;
  --tb-gouttiere:clamp(1rem, 4vw, 3rem);
  --tb-header-h:68px;

  /* ══ VARIABLES DÉRIVÉES ══════════════════════════════════════════════════
     Tout ce qui suit se construit à partir des valeurs ci-dessus. Ces tokens
     évitent de recopier des rgba() au fil des feuilles de style.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── Composantes RVB (pour composer des rgb()/rgba() à la volée) ───────── */
  --tb-vert-rvb:         20 83 45;
  --tb-vert-profond-rvb: 11 46 27;
  --tb-vert-clair-rvb:   31 122 69;
  --tb-orange-rvb:       232 118 30;
  --tb-or-rvb:           184 145 47;
  --tb-encre-rvb:        18 32 26;
  --tb-ivoire-rvb:       245 242 233;
  --tb-creme-rvb:        242 239 230;

  /* ── Gabarit dérivé ────────────────────────────────────────────────────── */
  --tb-conteneur-etroit: 760px;   /* colonne de lecture : règlement, chapôs */
  --tb-header-h-dense:   56px;    /* hauteur du header à l'état [data-defile] */
  --tb-photo-restreinte: 520px;   /* largeur MAXIMALE des photos avec visages */

  /* ── Plans (z-index) ───────────────────────────────────────────────────── */
  --tb-z-fond:      0;
  --tb-z-contenu:   1;
  --tb-z-collant:   50;   /* barres collantes internes aux pages */
  --tb-z-entete:    100;
  --tb-z-nav:       120;  /* panneau de navigation plein écran */
  --tb-z-survol:    150;  /* infobulles, menus déroulants */
  --tb-z-evitement: 300;  /* lien d'évitement : toujours au-dessus */

  /* ── Verre dépoli (header collant, barres flottantes) ──────────────────── */
  --tb-verre:        rgba(245,242,233,.74);
  --tb-verre-dense:  rgba(245,242,233,.94);
  --tb-verre-vert:   rgba(11,46,27,.72);
  --tb-flou:         saturate(160%) blur(14px);

  /* ── Transitions entre sections ──────────────────────────────────────────
     Deux ingrédients, jamais une cassure nette :
     1. une ombre d'entrée — la section précédente semble porter son ombre sur
        la suivante, ce qui donne de la profondeur sans voile laiteux ;
     2. un liseré d'un pixel, or sur fond sombre, encre sur fond clair.
     Les paliers suivent une courbe adoucie : une rampe d'opacité linéaire
     laisserait une arête visible en bas de la bande (effet de bande de Mach). */
  --tb-ombre-entree-claire: linear-gradient(to bottom,
      rgb(18 32 26 / .055) 0%,
      rgb(18 32 26 / .046) 18%,
      rgb(18 32 26 / .033) 38%,
      rgb(18 32 26 / .019) 60%,
      rgb(18 32 26 / .008) 80%,
      rgb(18 32 26 / 0) 100%);
  --tb-ombre-entree-sombre: linear-gradient(to bottom,
      rgb(0 0 0 / .30) 0%,
      rgb(0 0 0 / .25) 18%,
      rgb(0 0 0 / .18) 38%,
      rgb(0 0 0 / .10) 60%,
      rgb(0 0 0 / .04) 80%,
      rgb(0 0 0 / 0) 100%);

  /* Fondus de section, à disposition des feuilles de page (hero, incrustations). */
  --tb-degrade-depuis-ivoire:  linear-gradient(to bottom,
      rgb(245 242 233 / 1) 0%,
      rgb(245 242 233 / 0.96) 12%,
      rgb(245 242 233 / 0.86) 26%,
      rgb(245 242 233 / 0.7) 40%,
      rgb(245 242 233 / 0.5) 54%,
      rgb(245 242 233 / 0.31) 68%,
      rgb(245 242 233 / 0.16) 80%,
      rgb(245 242 233 / 0.06) 90%,
      rgb(245 242 233 / 0) 100%);
  --tb-degrade-depuis-alt:     linear-gradient(to bottom,
      rgb(239 234 217 / 1) 0%,
      rgb(239 234 217 / 0.96) 12%,
      rgb(239 234 217 / 0.86) 26%,
      rgb(239 234 217 / 0.7) 40%,
      rgb(239 234 217 / 0.5) 54%,
      rgb(239 234 217 / 0.31) 68%,
      rgb(239 234 217 / 0.16) 80%,
      rgb(239 234 217 / 0.06) 90%,
      rgb(239 234 217 / 0) 100%);
  --tb-degrade-depuis-vert:    linear-gradient(to bottom,
      rgb(20 83 45 / 1) 0%,
      rgb(20 83 45 / 0.96) 12%,
      rgb(20 83 45 / 0.86) 26%,
      rgb(20 83 45 / 0.7) 40%,
      rgb(20 83 45 / 0.5) 54%,
      rgb(20 83 45 / 0.31) 68%,
      rgb(20 83 45 / 0.16) 80%,
      rgb(20 83 45 / 0.06) 90%,
      rgb(20 83 45 / 0) 100%);
  --tb-degrade-depuis-profond: linear-gradient(to bottom,
      rgb(11 46 27 / 1) 0%,
      rgb(11 46 27 / 0.96) 12%,
      rgb(11 46 27 / 0.86) 26%,
      rgb(11 46 27 / 0.7) 40%,
      rgb(11 46 27 / 0.5) 54%,
      rgb(11 46 27 / 0.31) 68%,
      rgb(11 46 27 / 0.16) 80%,
      rgb(11 46 27 / 0.06) 90%,
      rgb(11 46 27 / 0) 100%);

  /* Liserés très fins posés en tête de section */
  --tb-lisere-or:    linear-gradient(to right, rgba(184,145,47,0) 0%, rgba(184,145,47,.50) 25%, rgba(227,197,103,.80) 50%, rgba(184,145,47,.50) 75%, rgba(184,145,47,0) 100%);
  --tb-lisere-encre: linear-gradient(to right, rgba(18,32,26,0) 0%, rgba(18,32,26,.14) 50%, rgba(18,32,26,0) 100%);

  /* Halo vert feutré pour les blocs sombres (récompenses, hero) */
  --tb-degrade-tapis: radial-gradient(120% 90% at 50% 0%, rgba(31,122,69,.30) 0%, rgba(11,46,27,0) 62%);

  /* ── Voiles posés sur les photos (lisibilité du texte incrusté) ────────── */
  --tb-voile-vert:         linear-gradient(180deg, rgba(11,46,27,.20) 0%, rgba(11,46,27,.55) 45%, rgba(11,46,27,.88) 100%);
  --tb-voile-vert-lateral: linear-gradient(90deg, rgba(11,46,27,.90) 0%, rgba(11,46,27,.55) 45%, rgba(11,46,27,.10) 100%);
  --tb-voile-vert-doux:    linear-gradient(180deg, rgba(20,83,45,.28) 0%, rgba(20,83,45,.62) 100%);
  --tb-voile-ivoire:       linear-gradient(180deg, rgba(245,242,233,0) 0%, rgba(245,242,233,.94) 100%);
  --tb-voile-vignette:     radial-gradient(85% 75% at 50% 45%, rgba(11,46,27,0) 0%, rgba(11,46,27,.45) 100%);

  /* ── Médailles : 1re, 2e, 3e place, puis rang neutre ───────────────────── */
  --tb-medaille-or-fond:      linear-gradient(145deg, #F1DA9B 0%, var(--tb-or-clair) 42%, var(--tb-or) 100%);
  --tb-medaille-or-trait:     rgba(184,145,47,.55);
  --tb-medaille-or-encre:     #4A3708;
  --tb-medaille-argent-fond:  linear-gradient(145deg, #E4E8EA 0%, #C3CBD0 45%, var(--tb-argent) 100%);
  --tb-medaille-argent-trait: rgba(152,162,168,.60);
  --tb-medaille-argent-encre: #2B3338;
  --tb-medaille-bronze-fond:  linear-gradient(145deg, #DBAE85 0%, #C08A57 45%, var(--tb-bronze) 100%);
  --tb-medaille-bronze-trait: rgba(169,113,63,.55);
  --tb-medaille-bronze-encre: #40230C;
  --tb-medaille-neutre-fond:  var(--tb-vert-pale);
  --tb-medaille-neutre-trait: rgba(18,32,26,.14);
  --tb-medaille-neutre-encre: var(--tb-encre-70);

  /* Halo doré derrière la première marche du podium */
  --tb-halo-or: radial-gradient(60% 60% at 50% 40%, rgba(227,197,103,.38) 0%, rgba(227,197,103,0) 70%);

  /* ── Barres de points en fond de ligne de tableau ────────────────────────
     Trois intensités : leader, joueur classé, joueur non classé. Les opacités
     restent volontairement basses pour ne jamais gêner la lecture du texte. */
  --tb-barre-op-forte:   .26;
  --tb-barre-op-moyenne: .16;
  --tb-barre-op-faible:  .09;
  --tb-barre-clair:  linear-gradient(90deg, rgba(31,122,69,.26) 0%, rgba(31,122,69,.09) 100%);
  --tb-barre-sombre: linear-gradient(90deg, rgba(227,197,103,.30) 0%, rgba(227,197,103,.08) 100%);
  --tb-barre-or:     linear-gradient(90deg, rgba(184,145,47,.34) 0%, rgba(227,197,103,.10) 100%);

  /* ── Surfaces de survol, d'activation et de sélection ──────────────────── */
  --tb-survol-clair:  rgba(31,122,69,.07);
  --tb-survol-sombre: rgba(242,239,230,.08);
  --tb-actif-clair:   rgba(31,122,69,.13);
  --tb-actif-sombre:  rgba(242,239,230,.14);
  --tb-selection:     rgba(31,122,69,.22);

  /* ── Focus (accessibilité : contour orange 2 px, décalé de 2 px) ───────── */
  --tb-focus-couleur: var(--tb-orange);
  --tb-focus-trait:   2px;
  --tb-focus-ecart:   2px;

  /* ── Durées complémentaires ────────────────────────────────────────────── */
  --tb-d0:90ms;              /* micro-réactions : survol, pression */
  --tb-cascade-pas:60ms;     /* décalage entre deux éléments d'une cascade */
  --tb-cascade-max:600ms;    /* plafond de la cascade */

  /* ── Squelettes de chargement ──────────────────────────────────────────── */
  --tb-squelette-fond:  rgba(18,32,26,.06);
  --tb-squelette-eclat: rgba(255,253,248,.75);
}