/* ============================================================
   tokens.css — Design system Maëva Firpionn
   Extrait des variables Figma. À utiliser tel quel.
   ============================================================ */

:root {

  /* ---------- COULEURS : échelles brutes ---------- */

  /* Neutral / Primary */
  --neutral-50:  #FFFFFF;
  --neutral-100: #DFDFDF;
  --neutral-200: #C8C8C8;
  --neutral-300: #B0B0B0;
  --neutral-400: #979797;
  --neutral-500: #7F7F7F;
  --neutral-600: #666666;
  --neutral-700: #4C4C4C;
  --neutral-800: #282828;
  --neutral-900: #171717;
  --neutral-950: #000000;

  /* Red */
  --red-50:  #F9E9E9;
  --red-100: #F6DEDF;
  --red-200: #EDBABC;
  --red-300: #C62127;
  --red-400: #B21E23;
  --red-500: #9E1A1F;
  --red-600: #95191D;
  --red-700: #771417;
  --red-800: #590F12;
  --red-900: #450C0E;

  /* Green */
  --green-50:  #E8F6ED;
  --green-100: #DDF2E3;
  --green-200: #B9E3C6;
  --green-300: #1CA647;
  --green-400: #199540;
  --green-500: #168539;
  --green-600: #157D35;
  --green-700: #11642B;
  --green-800: #0D4B20;
  --green-900: #0A3A19;

  /* Blue */
  --blue-50:     #E9ECF8;
  --blue-100:    #DDE2F4;
  --blue-200:    #BAC3E9;
  --blue-200bis: #6A7FD8;
  --blue-300:    #1F3CB7;
  --blue-400:    #1C36A5;
  --blue-500:    #193092;
  --blue-600:    #172D89;
  --blue-700:    #13246E;
  --blue-800:    #0E1B52;
  --blue-900:    #0B1540;

  /* ---------- COULEURS : jetons sémantiques ---------- */

  /* Texte */
  --font-primary:        var(--neutral-950); /* #000000 */
  --font-secondary:      var(--neutral-800); /* #282828 */
  --font-white:          var(--neutral-50);  /* #FFFFFF */
  --font-primary-subtle: var(--neutral-700); /* #4C4C4C */
  --font-muted:          var(--neutral-300); /* #B0B0B0 — placeholders, légendes */
  --font-red:            var(--red-300);
  --font-green:          var(--green-300);
  --font-blue:           var(--blue-300);
  --font-menu:           var(--blue-100);
  --font-menu-2:         var(--blue-200bis);

  /* Bordures / traits */
  --stroke-primary:          var(--neutral-950);
  --stroke-white:            var(--neutral-50);
  --stroke-primary-subtle:   var(--neutral-800);
  --stroke-secondary-subtle: var(--neutral-700);
  --stroke-white-subtle:     var(--neutral-400);
  --stroke-blue:             var(--blue-300);
  --stroke-blue-menu:        var(--blue-200bis);

  /* Fonds (à confirmer depuis la collection Surface de Figma) */
  --surface-primary: var(--neutral-50);  /* fond clair par défaut */
  --surface-inverse: var(--neutral-950); /* fond noir */
  --surface-blue:    var(--blue-300);    /* fond bleu (accueil, hero À propos, carte dispo) */

  /* ---------- TYPOGRAPHIE ---------- */
  --font-title: "Syne", sans-serif;
  --font-body:  "DM Sans", sans-serif;

  /* ---------- ESPACEMENTS / GAPS / RAYONS (px) ---------- */
  --space-0:  0px;
  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --radius-full: 999px;

  /* ---------- LARGEURS ---------- */
  --width-desktop: 1440px;
  --width-mobile:  402px;
}