/* tokens.css — Variables de design Outillée */

:root {
  /* Palette */
  --color-rose:    #ECB2C1;
  --color-bleu:    #629FB9;
  --color-olive:   #8C873F;
  --color-ocre:    #F9B75B;
  --color-corail:  #F26D54;
  --color-creme:   #F0EBDF;
  --color-fonce:   #2a1f26;
  --color-texte:   #111111;

  /* Usages sémantiques */
  --color-bg:           var(--color-creme);
  --color-bg-contraste: var(--color-fonce);
  --color-cta:          var(--color-corail);
  --color-pedagogique:  var(--color-bleu);
  --color-accent:       var(--color-olive);
  --color-badge:        var(--color-ocre);
  --color-humain:       var(--color-rose);

  /* Typographie */
  --font-titre:    'Thierry Leonie', Georgia, serif;
  --font-accent:   'Positively Magnetic', cursive;
  --font-corps:    -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1rem;
  --size-md:   1.125rem;
  --size-lg:   1.25rem;
  --size-xl:   1.5rem;
  --size-2xl:  2rem;
  --size-3xl:  2.5rem;
  --size-4xl:  3rem;

  /* Espacement */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Bordures */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(42, 31, 38, 0.1);
  --shadow-md: 0 4px 12px rgba(42, 31, 38, 0.12);
  --shadow-lg: 0 8px 24px rgba(42, 31, 38, 0.15);

  /* Layout */
  --max-width: 1100px;
  --col-gap: var(--space-xl);
}