/* =====================================================================
   FIT FIVE — variables.css
   Direction artistique : MATCHDAY — noir stade, rouge maillot, arêtes
   vives, typographie condensée athlétique (Archivo, axe de largeur).
   >>> Toutes les couleurs, typographies et mesures sont ici. <<<
   ===================================================================== */

:root {
  /* ---------- Rouge (accent de marque) ---------- */
  --red:         #E30613;
  --red-dark:    #A80510;
  --red-bright:  #FF2B3B;

  /* ---------- Base sombre ---------- */
  --black:       #08090C;   /* sections les plus profondes / footer / boutons noirs */
  --white:       #FFFFFF;
  --bg-0:        #0C0D11;   /* fond principal de la page */
  --surface:     #16181F;   /* cartes & champs (ressort au-dessus des sections) */
  --surface-2:   #1F222B;   /* survols */
  --line:        rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);

  /* ---------- Clés héritées, remappées vers le thème sombre ---------- */
  --anthracite:  #101218;   /* sections "claires"/anthracite */
  --gray-900:    #0F1014;
  --gray-800:    #16181F;
  --gray-600:    rgba(255, 255, 255, 0.16);
  --gray-400:    #73767F;
  --gray-200:    rgba(255, 255, 255, 0.10);
  --gray-light:  #0A0B0F;   /* sections "grises" */

  /* ---------- Statuts (créneaux / terrains) ---------- */
  --status-free:   #29C765;
  --status-soon:   #F5A623;
  --status-busy:   #E30613;
  --status-closed: #5a5f68;

  /* ---------- Texte (clair sur fond sombre) ---------- */
  --text-dark:       #F4F5F7;   /* remappé clair (texte principal) */
  --text-light:      #F4F5F7;
  --text-muted:      #A6AAB3;
  --text-muted-dark: #A6AAB3;   /* remappé clair (texte secondaire) */

  /* ---------- Typographie ------------------------------------------
     Une seule famille : Archivo, exploitée sur son axe de largeur.
     - jersey  : ultra-condensé 900 → titres, chiffres, dossards
     - label   : semi-condensé 700 → boutons, nav, eyebrows
     - body    : normal 400/500    → paragraphes
     Utiliser font-stretch (compatible fonte variable ET instances
     statiques servies par Google Fonts).
     ------------------------------------------------------------------ */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-head:    "Archivo", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --w-jersey:  62.5%;   /* extra-condensed */
  --w-cond:    75%;     /* condensed */
  --w-label:   87.5%;   /* semi-condensed */
  --w-normal:  100%;
  --w-broad:   112.5%;  /* semi-expanded */

  --fs-hero:   clamp(3.2rem, 11vw, 9.5rem);
  --fs-h1:     clamp(2.6rem, 7vw, 5.4rem);
  --fs-h2:     clamp(2.1rem, 5.2vw, 4.2rem);
  --fs-h3:     clamp(1.2rem, 2vw, 1.6rem);
  --fs-lead:   clamp(1.02rem, 1.5vw, 1.22rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;

  /* ---------- Mesures & espacements ---------- */
  --maxw:        1320px;
  --maxw-narrow: 820px;
  --gutter:      clamp(18px, 4vw, 40px);
  --header-h:    78px;

  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  clamp(84px, 12vw, 156px);

  /* ---------- Rayons : système "tout droit" ------------------------
     Un seul système de forme sur tout le site : arêtes vives.
     Seuls les points d'état (pastilles) restent des cercles.
     ------------------------------------------------------------------ */
  --radius-sm:   0px;
  --radius:      0px;
  --radius-lg:   0px;
  --radius-pill: 0px;

  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow:    0 18px 44px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 34px 80px rgba(0, 0, 0, 0.55);
  --glow-red-on: 0 0 0 1px rgba(227, 6, 19, 0.5), 0 10px 30px rgba(227, 6, 19, 0.28);

  /* ---------- Transitions ---------- */
  --t-fast: 0.16s cubic-bezier(0.2, 0.7, 0.3, 1);
  --t:      0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-slow: 0.62s cubic-bezier(0.16, 1, 0.3, 1);

  --line-tactic: rgba(255, 255, 255, 0.05);
  --z-header: 1000;
  --z-modal:  2000;
  --z-toast:  3000;
  --z-cursor: 4000;
}

/* Utilitaires typographiques (axe de largeur) ----------------------- */
.t-jersey { font-family: var(--font-display); font-stretch: var(--w-jersey); font-weight: 900; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.005em; }
.t-cond   { font-family: var(--font-head);    font-stretch: var(--w-cond);   font-weight: 800; text-transform: uppercase; }
.t-label  { font-family: var(--font-head);    font-stretch: var(--w-label);  font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.t-num    { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }