/* =============================================================
   TOKENS — Design system YEP Training
   Source de vérité unique : couleurs, typographie, espacement,
   rayons, ombres, motion. Aucune valeur arbitraire ailleurs.
   ============================================================= */

:root {
  /* === COULEURS — extraites du logo YEP === */
  --navy:        #0E1B57;   /* "your english perfected" */
  --navy-deep:   #070E2E;
  --red:         #E2231A;   /* le "Yep!" — décoratif, accents visuels */
  --red-deep:    #B4180F;   /* fond CTA — contraste AA garanti */

  /* Neutres chauds coordonnés */
  --paper:       #FAF7F2;
  --paper-alt:   #F2EDE3;
  --line:        #E7E0D2;
  --muted:       #6B6670;

  /* Rôles sémantiques */
  --ink:         var(--navy);
  --text:        #1A1A1A;
  --text-soft:   var(--muted);
  --bg:          var(--paper);
  --bg-alt:      var(--paper-alt);
  --border:      var(--line);
  --cta:         var(--red-deep);
  --cta-hover:   #8C120A;
  --focus:       #FFB800;   /* lisible sur rouge et navy */

  /* === TYPOGRAPHIE === */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Échelle typo — alignée Tailwind */
  --text-xs:   0.75rem;    /* 12 / 16 */
  --text-sm:   0.875rem;   /* 14 / 20 */
  --text-base: 1rem;       /* 16 / 24 */
  --text-lg:   1.125rem;   /* 18 / 28 */
  --text-xl:   1.25rem;    /* 20 / 28 */
  --text-2xl:  1.5rem;     /* 24 / 32 */
  --text-3xl:  1.875rem;   /* 30 / 36 */
  --text-4xl:  2.25rem;    /* 36 / 40 */
  --text-5xl:  3rem;       /* 48 / 1  */
  --text-6xl:  3.75rem;    /* 60 / 1  */
  --text-7xl:  4.5rem;     /* 72 / 1  */

  /* Poids */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* === ESPACEMENT === */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  80px;
  --s-10: 96px;

  /* === RAYONS === */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* === OMBRES — teintées navy pour cohérence === */
  --shadow-sm: 0 1px 3px rgba(14, 27, 87, .08), 0 1px 2px rgba(14, 27, 87, .04);
  --shadow-md: 0 4px 12px rgba(14, 27, 87, .08), 0 2px 4px rgba(14, 27, 87, .04);
  --shadow-lg: 0 12px 32px rgba(14, 27, 87, .12), 0 4px 8px rgba(14, 27, 87, .04);
  --shadow-xl: 0 24px 48px rgba(14, 27, 87, .16), 0 8px 16px rgba(14, 27, 87, .06);

  /* === MOTION — fluid dynamics === */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-fluid: cubic-bezier(.32, .72, 0, 1);
  --ease-in:    cubic-bezier(.55, 0, 1, .45);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   700ms;
  --dur-hero:   800ms;

  /* === Z-INDEX === */
  --z-nav:  100;
  --z-menu: 200;

  /* === CONTAINERS === */
  --container:        1200px;
  --container-narrow: 720px;
}