/*
 * LAME — Design System
 * Variables CSS centralisées — à importer en premier dans chaque page
 * Direction A : "Salle d'armes premium" (fond bleu nuit profond)
 */

:root {

  /* ══════════════════════════════════════════
     COULEURS DE FOND
     Bleu nuit profond (vs quasi-noir de l'ancienne version)
  ══════════════════════════════════════════ */
  --bg:       #0c1220;
  --surface:  #111d2e;
  --surface2: #192537;
  --surface3: #223148;

  /* ══════════════════════════════════════════
     ACCENT OR — médaille, excellence, identité LAME
  ══════════════════════════════════════════ */
  --gold:        #C9A84C;
  --gold-pale:   rgba(201, 168, 76, 0.12);
  --gold-glow:   rgba(201, 168, 76, 0.22);
  --border-gold: rgba(201, 168, 76, 0.35);

  /* ══════════════════════════════════════════
     ACCENT BLEU — équipe A, données, modernité
  ══════════════════════════════════════════ */
  --blue:   #4A9EE0;
  --blue-dim: rgba(74, 158, 224, 0.13);
  --blue-b:   rgba(74, 158, 224, 0.30);

  /* ══════════════════════════════════════════
     ACCENT ROUGE — équipe B, danger, touche adverse
  ══════════════════════════════════════════ */
  --red:   #E05A4A;
  --red-dim: rgba(224, 90, 74, 0.13);
  --red-b:   rgba(224, 90, 74, 0.30);

  /* ══════════════════════════════════════════
     ACCENT VERT — succès, touche, validation
  ══════════════════════════════════════════ */
  --green:   #3ecc88;
  --green-dim: rgba(62, 204, 136, 0.12);
  --green-b:   rgba(62, 204, 136, 0.30);

  /* ══════════════════════════════════════════
     ACCENT VIOLET — statistiques avancées
  ══════════════════════════════════════════ */
  --purple:   #9B59B6;
  --purple-dim: rgba(155, 89, 182, 0.13);
  --purple-b:   rgba(155, 89, 182, 0.30);

  /* ══════════════════════════════════════════
     TRICOLORE FRANÇAIS — accents ponctuels
  ══════════════════════════════════════════ */
  --france-blue: #002395;
  --france-red:  #ED2939;

  /* ══════════════════════════════════════════
     TEXTE
  ══════════════════════════════════════════ */
  --text:       #E8EDF2;
  --text-dim:   rgba(232, 237, 242, 0.52);
  --text-faint: rgba(232, 237, 242, 0.22);

  /* ══════════════════════════════════════════
     BORDURES
  ══════════════════════════════════════════ */
  --border:  rgba(255, 255, 255, 0.07);
  --border2: rgba(255, 255, 255, 0.11);

  /* ══════════════════════════════════════════
     TYPOGRAPHIE
  ══════════════════════════════════════════ */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --fs-xs:   0.75rem;     /* 12px */
  --fs-sm:   0.8125rem;   /* 13px */
  --fs-base: 1rem;        /* 16px */
  --fs-lg:   1.125rem;    /* 18px */
  --fs-xl:   1.375rem;    /* 22px */
  --fs-2xl:  1.75rem;     /* 28px */
  --fs-3xl:  2.5rem;      /* 40px */
  --fs-4xl:  3.5rem;      /* 56px */

  /* ══════════════════════════════════════════
     ESPACEMENTS
  ══════════════════════════════════════════ */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;

  /* ══════════════════════════════════════════
     RAYONS
  ══════════════════════════════════════════ */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 9999px;

  /* ══════════════════════════════════════════
     OMBRES
  ══════════════════════════════════════════ */
  --sh-sm:    0 1px 4px rgba(0, 0, 0, 0.35);
  --sh-md:    0 4px 16px rgba(0, 0, 0, 0.45);
  --sh-lg:    0 8px 32px rgba(0, 0, 0, 0.55);
  --sh-gold:  0 8px 40px rgba(201, 168, 76, 0.15);
  --sh-blue:  0 8px 40px rgba(74, 158, 224, 0.12);
  --sh-red:   0 8px 40px rgba(224, 90, 74, 0.12);
  --sh-green: 0 8px 40px rgba(62, 204, 136, 0.12);

  /* ══════════════════════════════════════════
     TRANSITIONS
  ══════════════════════════════════════════ */
  --t-fast:   150ms ease;
  --t-base:   250ms ease;
  --t-slow:   400ms ease;
  --t-spring: 250ms cubic-bezier(.22, 1, .36, 1);
}