/* ============================================================================
   tokens.css — Design system Padel-Raquette
   Source unique de vérité pour toutes les valeurs de la charte graphique.
   À importer en premier dans tous les fichiers CSS.
   ========================================================================== */

:root {
  /* ---------- COULEURS PRINCIPALES ---------- */
  --color-night:    #0E1B2C;  /* Bleu nuit indoor — dominante */
  --color-forest:   #1F4731;  /* Vert forêt terrain */
  --color-sand:     #E8DCC4;  /* Beige sable */
  --color-bone:     #F5F1E8;  /* Os/papier — fond principal */
  --color-ball:     #DCE84A;  /* Jaune balle — accent énergique */
  --color-clay:     #B5462E;  /* Terre cuite — accent secondaire */

  /* ---------- NEUTRES ---------- */
  --color-ink:      #0A0F1A;  /* Texte principal */
  --color-graphite: #2D3748;  /* Texte secondaire */
  --color-slate:    #6B7280;  /* Texte tertiaire / méta */
  --color-line:     #D1CCC0;  /* Lignes sur fond clair */
  --color-line-dark:#1E2D40;  /* Lignes sur fond sombre */

  /* ---------- ALIASES SÉMANTIQUES ---------- */
  --bg:             var(--color-bone);
  --bg-alt:         var(--color-sand);
  --bg-dark:        var(--color-night);
  --text:           var(--color-ink);
  --text-soft:      var(--color-graphite);
  --text-muted:     var(--color-slate);
  --accent:         var(--color-ball);
  --accent-2:       var(--color-clay);
  --border:         var(--color-line);

  /* ---------- TYPOGRAPHIE ---------- */
  --font-display:   'Anton', 'Arial Narrow', 'Arial Black', sans-serif;
  --font-serif:     'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-sans:      'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  /* Échelle typographique (modular scale 1.25) */
  --text-xs:        11px;
  --text-sm:        14px;
  --text-base:      16px;
  --text-md:        18px;
  --text-lg:        22px;
  --text-xl:        28px;
  --text-2xl:       36px;
  --text-3xl:       48px;
  --text-4xl:       64px;
  --text-5xl:       88px;
  --text-6xl:       120px;

  /* Line heights */
  --lh-tight:       0.95;
  --lh-snug:        1.15;
  --lh-normal:      1.5;
  --lh-relaxed:     1.65;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal:0;
  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest:0.18em;

  /* ---------- SPACING (base 8) ---------- */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;
  --space-8:        64px;
  --space-9:        96px;
  --space-10:       128px;

  /* ---------- LAYOUT ---------- */
  --container-max:  1400px;
  --container-text: 720px;       /* Largeur idéale pour texte courant */
  --container-narrow: 880px;

  /* ---------- BORDER RADIUS ---------- */
  --radius-none:    0;
  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-lg:      8px;
  --radius-full:    9999px;

  /* ---------- BORDERS ---------- */
  --border-thin:    1px solid var(--border);
  --border-medium:  2px solid var(--text);
  --border-thick:   3px solid var(--text);

  /* ---------- SHADOWS ---------- */
  --shadow-sm:      0 1px 2px rgba(14, 27, 44, 0.05);
  --shadow-md:      0 4px 16px rgba(14, 27, 44, 0.08);
  --shadow-lg:      0 12px 32px rgba(14, 27, 44, 0.12);

  /* ---------- TRANSITIONS ---------- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;

  /* ---------- Z-INDEX ---------- */
  --z-base:         1;
  --z-dropdown:     50;
  --z-sticky:       100;
  --z-modal:        500;
  --z-toast:        1000;
}

/* ---------- RESPONSIVE TYPOGRAPHIE ---------- */
@media (max-width: 768px) {
  :root {
    --text-3xl:     36px;
    --text-4xl:     48px;
    --text-5xl:     64px;
    --text-6xl:     80px;
  }
}