/* ==========================================================================
   Overall Jiu-jitsu — Design Tokens
   Source : Charte graphique Overall + direction
   ========================================================================== */

:root {

  /* ── Couleurs ─────────────────────────────────────────────────────────── */

  --color-black:   #000000;
  --color-white:   #FFFFFF;
  --color-navy:    #041422;
  --color-slate:   #303B4D;
  --color-beige:   #EDE9E0;

  /* Sémantiques */
  --color-bg:        var(--color-beige);
  --color-bg-alt:    var(--color-white);
  --color-bg-dark:   var(--color-black);
  --color-fg:        var(--color-black);
  --color-fg-muted:  rgba(0, 0, 0, .55);

  /* ── Typographie ──────────────────────────────────────────────────────── */

  /* Famille : Helvetica Neue LT Pro Extended (commercial) → Barlow Semi Condensed (Google Fonts) */
  --font-family: 'HelveticaNeueLTPro', 'Barlow Semi Condensed', 'Helvetica Neue', Arial, sans-serif;

  /* Graisses */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --fw-black:    900;

  /* Corps */
  --fs-display: 72px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-caption: 13px;
  --fs-micro:   11px;
  --fs-label:   10px;
  --fs-nano:    9px;
  --fs-tiny:    8px;

  /* Interlignage */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Espacement lettres */
  --ls-display:   0.02em;
  --ls-heading:   0.01em;
  --ls-body:      0.01em;
  --ls-uppercase: 0.08em;
  --ls-label:     0.22em;
  --ls-wide:      0.34em;
  --ls-ultra:     0.4em;

  /* ── Espacements ──────────────────────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;
  --space-4xl: 120px;

  /* Padding de page */
  --page-px:         80px;
  --page-px-mobile:  18px;
  --section-py:     100px;

  /* ── Bordures ─────────────────────────────────────────────────────────── */
  --border-hairline: 1px solid rgba(0, 0, 0, .08);
  --border-light:    1px solid rgba(0, 0, 0, .12);
  --border-medium:   1px solid rgba(0, 0, 0, .18);
  --border-strong:   1px solid rgba(0, 0, 0, .30);

  /* ── Ombres ───────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, .12);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, .15);
  --shadow-lg:  0 8px 30px rgba(0, 0, 0, .20);

  /* ── Breakpoints (à lire via @media, listés ici pour référence) ─────── */
  /* mobile  : < 768px  */
  /* tablet  : 768–1024px  */
  /* desktop : > 1024px  */
}