/*
 * Design tokens by role (DESIGN §2). The only file allowed to hold raw values:
 * every other stylesheet and template uses these variables.
 */
:root {
  /* Neutrals (DESIGN §2.1) */
  --fond-page: #F6F4EF;
  --surface: #FFFFFF;
  --surface-creuse: #ECEAE4;
  --trait: #D9D5CC;
  --trait-champ: #8C8778;
  --texte: #1C2430;
  --texte-secondaire: #55606E;
  --texte-inverse: #FFFFFF;

  /* Accent */
  --accent: #2557D6;
  --accent-survol: #1D45B0;
  --accent-fond: #E8EEFB;

  /* Semantic: statuses only, never decoration */
  --succes: #1E6B3F;
  --succes-fond: #E6F3EA;
  --attention: #7A4F00;
  --attention-fond: #FFF3D6;
  --erreur: #C4264A;
  --erreur-survol: #9F1C3B;
  --erreur-fond: #FCE8ED;
  --neutre: #4A5565;
  --neutre-fond: #ECEAE4;
  --information: #2557D6;
  --information-fond: #E8EEFB;

  /* Typography (DESIGN §2.2). IBM Plex is self-hosted (fonts.css); system fonts are the fallback. */
  --police-texte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --taille-titre-page: 1.75rem;
  --interligne-titre-page: 2.25rem;
  --taille-titre-section: 1.25rem;
  --interligne-titre-section: 1.75rem;
  --taille-corps: 1rem;
  --interligne-corps: 1.5rem;
  --taille-dense: 0.875rem;
  --interligne-dense: 1.25rem;
  --taille-aide: 0.8125rem;
  --interligne-aide: 1.125rem;

  /* Spacing scale (DESIGN §2.4): no other value is allowed */
  --espace-4: 4px;
  --espace-8: 8px;
  --espace-12: 12px;
  --espace-16: 16px;
  --espace-24: 24px;
  --espace-32: 32px;
  --espace-48: 48px;
  --espace-64: 64px;

  --rayon-champ: 8px;
  --rayon-case: 6px;
  --rayon-panneau: 12px;
  --rayon-badge: 999px;

  /* Control and layout sizes (DESIGN §3.1, §3.3, §4.1, §4.5) */
  --hauteur-entete: 56px;
  --taille-logo: 40px;
  --taille-logo-module: 32px;
  --taille-logo-tuile: 56px;
  --hauteur-controle: 44px;
  --hauteur-controle-dense: 36px;
  --hauteur-ligne: 44px;
  --hauteur-ligne-dense: 36px;
  --cible-tactile: 44px;
  --largeur-contenu: 1280px;
  --largeur-connexion: 400px;
  --largeur-tiroir: 560px;
  --largeur-modale: 560px;
  --largeur-champ-large: 480px;
  --largeur-depot: 720px;

  /* Focus ring (DESIGN §10.1): 3 px accent, 2 px offset */
  --focus-largeur: 3px;
  --focus-decalage: 2px;

  /* The only shadow, for floating elements (DESIGN §2.4), and the backdrop behind dialogs */
  --ombre-flottante: 0 4px 16px rgb(28 36 48 / 0.16);
  --voile: rgb(28 36 48 / 0.4);

  /* The primary button at rest (DESIGN §2.4): the one resting shadow */
  --ombre-bouton: 0 1px 2px rgb(28 36 48 / 0.24);
  --halo-focus-champ: 0 0 0 3px var(--accent-fond);

  /* Motion (DESIGN §8.1): 120 ms hover/focus, 200 ms openings, 300 ms at most */
  --duree-survol: 120ms;
  --duree-ouverture: 200ms;
  --duree-max: 300ms;
  --courbe-apparition: cubic-bezier(0, 0, 0.2, 1);
  --courbe-disparition: cubic-bezier(0.4, 0, 1, 1);

  --marge-laterale: var(--espace-32);
}

@media (max-width: 1023px) {
  :root {
    --marge-laterale: var(--espace-16);
  }
}