/*
  tokens.css — Design tokens (couleurs, typo, espacements, radius, ombres).
  Aucune règle de style ici, uniquement des custom properties.
*/
:root {
  /* ---- Couleurs de marque ---- */
  --color-yellow: #FFD707;        /* accent signature — jamais en texte sur clair */
  --color-yellow-deep: #E3C000;   /* hover / bordures sur jaune */
  --color-terracotta: #EC7D4B;
  --color-terracotta-dark: #D96A3A; /* hover boutons terracotta */
  --color-orange: #EF9362;
  --color-brown: #7A5B47;
  --color-brown-dark: #5C4331;

  /* ---- Neutres & texte ---- */
  --color-ink: #33241A;           /* texte courant — AA garanti sur clair */
  --color-ink-soft: #5C4B3E;      /* texte secondaire */
  --color-cream: #FFFBF2;         /* fond de page */
  --color-cream-deep: #FBF0DD;    /* fond de section alterné */
  --color-white: #FFFFFF;
  --color-line: #ECDFC9;          /* bordures discrètes */
  --color-line-strong: #E2CBA8;

  /* ---- États ---- */
  --color-success-bg: #E7F3E1;
  --color-success-ink: #2F5D2A;
  --color-success-border: #B9DBAC;
  --color-info-bg: #FDF0DC;
  --color-info-ink: #7A4F16;
  --color-info-border: #F0D6A3;
  --color-error-bg: #FBE7E4;
  --color-error-ink: #8A2E1F;
  --color-error-border: #EFC1B8;

  /* ---- Typo ---- */
  --font-display: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;

  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.3rem;
  --text-xl: 1.6rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.1rem;

  /* ---- Espacements ---- */
  --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;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Ombres ---- */
  --shadow-sm: 0 2px 6px -2px rgba(51, 36, 26, 0.16);
  --shadow-md: 0 12px 28px -12px rgba(51, 36, 26, 0.28);
  --shadow-lg: 0 20px 44px -16px rgba(51, 36, 26, 0.34);

  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.22s ease;

  /* ---- Layout ---- */
  --container-max: 1200px;
}