/* ═══════════════════════════════════════
   EQUALLY ESPORT — variables.css
   Tokens de design : couleurs, typo, spacing
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,700;1,700;1,800;1,900&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ── Couleurs ── */
  --color-bg:         #080808;
  --color-bg-2:       #111111;
  --color-bg-3:       #1A0000;
  --color-red:        #E5000A;
  --color-red-hover:  #FF2D35;
  --color-red-dark:   #8B0000;
  --color-white:      #FFFFFF;
  --color-gray:       #9A9A9A;
  --color-gray-dark:  #2A2A2A;
  --color-green:      #00C853;

  /* ── Typographie ── */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Tailles de texte ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  3rem;
  --text-5xl:  4.5rem;
  --text-hero: clamp(3rem, 10vw, 8rem);

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ── Border radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ── Transitions ── */
  --transition: all 0.3s ease-out;
  --transition-fast: all 0.15s ease-out;

  /* ── Ombres ── */
  --glow-red:      0 0 20px rgba(229, 0, 10, 0.5), 0 0 40px rgba(229, 0, 10, 0.2);
  --glow-red-sm:   0 0 10px rgba(229, 0, 10, 0.4);
  --glow-red-lg:   0 0 40px rgba(229, 0, 10, 0.6), 0 0 80px rgba(229, 0, 10, 0.3);

  /* ── Layout ── */
  --container-max: 1280px;
  --navbar-h: 72px;
}