/* Le seul endroit où une couleur, un espacement ou une taille est définie.
 *
 * Un jeton nomme un RÔLE (`--fond-marque`), jamais une valeur (`--vert-500`). Un jeton
 * nommé par sa valeur ment dès que le thème sombre le redéfinit — c'est exactement ce qui a
 * rendu illisibles la barre du back-office et le hero client sur `velvet-interface`.
 *
 * Toute surface colorée déclare son texte apparié, et chaque paire est vérifiée en
 * contraste WCAG dans les deux thèmes par `design/test/systeme.test.mjs`. Ajouter un fond
 * sans inscrire sa paire dans ce test, c'est rouvrir le défaut.
 */

:root {
  /* Surfaces */
  --fond-page: #fbfbfd;
  --texte-page: #16171b;

  --fond-carte: #ffffff;
  --texte-carte: #16171b;

  --fond-marque: #1f3d8f;
  --texte-marque: #ffffff;

  --fond-discret: #eceef4;
  --texte-discret: #4a4e5c;

  /* États */
  --fond-succes: #0d6e4a;
  --texte-succes: #ffffff;

  --fond-alerte: #8a2a1f;
  --texte-alerte: #ffffff;

  /* Traits */
  --bordure: #d6d9e3;

  /* Espacements — échelle unique, pas de valeur en dur dans un composant */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 16px;
  --espace-4: 24px;
  --espace-5: 40px;

  /* Typographie */
  --police: system-ui, -apple-system, "Segoe UI", sans-serif;
  --taille-petite: 0.875rem;
  --taille-base: 1rem;
  --taille-titre: 1.5rem;
  --taille-hero: 2.5rem;

  --rayon: 10px;
}

:root[data-theme='sombre'] {
  --fond-page: #101116;
  --texte-page: #edeef2;

  --fond-carte: #191b22;
  --texte-carte: #edeef2;

  --fond-marque: #8fa8ee;
  --texte-marque: #101116;

  --fond-discret: #23262f;
  --texte-discret: #b9bdc9;

  --fond-succes: #6fd3a8;
  --texte-succes: #101116;

  --fond-alerte: #f0938a;
  --texte-alerte: #101116;

  --bordure: #333846;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) {
    --fond-page: #101116;
    --texte-page: #edeef2;

    --fond-carte: #191b22;
    --texte-carte: #edeef2;

    --fond-marque: #8fa8ee;
    --texte-marque: #101116;

    --fond-discret: #23262f;
    --texte-discret: #b9bdc9;

    --fond-succes: #6fd3a8;
    --texte-succes: #101116;

    --fond-alerte: #f0938a;
    --texte-alerte: #101116;

    --bordure: #333846;
  }
}

body {
  margin: 0;
  background: var(--fond-page);
  color: var(--texte-page);
  font-family: var(--police);
  font-size: var(--taille-base);
}