/*
 * Jetons du système visuel « bulletin » : papier et encre, sans couleur.
 *
 * Neutralité (charte et checklist n° 20) : aucune teinte n'est utilisée, parce
 * qu'en France presque chaque couleur évoque un camp. L'identité tient à la
 * typographie, aux filets et à la forme des cartes (des bulletins). Les états
 * ne sont jamais portés par la seule couleur : texte, icône, graisse ou trait.
 *
 * Contrastes vérifiés par web/tests/contrastes.test.mjs (WCAG 2.2 AA) :
 * texte ≥ 4,5:1 sur fond et surface, composants (bordures, jauges) ≥ 3:1.
 */

:root {
  color-scheme: light;

  /* Couleurs, thème clair */
  --fond: #f4f1ea;
  --fond-2: #e9e5db;
  --surface: #ffffff;
  --encre: #17181c;
  --encre-2: #464a53;
  --encre-3: #5f636b;
  --filet: #d6d1c5;
  --filet-fort: #85806f;
  --accent: #17181c;
  --sur-accent: #ffffff;
  --voile: rgb(23 24 28 / 0.55);
  --ombre-carte: 0 1px 0 rgb(23 24 28 / 0.06), 0 12px 28px -18px rgb(23 24 28 / 0.35);
  --ombre-levee: 0 1px 0 rgb(23 24 28 / 0.08), 0 18px 36px -18px rgb(23 24 28 / 0.45);
  --trame: rgb(23 24 28 / 0.05);

  /* Typographie : polices du système uniquement (checklist n° 11) */
  --police-titre: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', 'URW Palladio L', P052, Georgia, serif;
  --police-texte: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  --police-chiffres: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --t-0: 0.8125rem; /* 13 px : mentions */
  --t-1: 0.9375rem; /* 15 px : secondaire */
  --t-2: 1.0625rem; /* 17 px : texte courant */
  --t-3: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem); /* texte des cartes */
  --t-4: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-5: clamp(2rem, 1.6rem + 2vw, 3rem);
  --t-6: clamp(2.5rem, 1.8rem + 3.6vw, 4.5rem);

  --interligne: 1.55;
  --interligne-serre: 1.2;

  /* Espacements (échelle de 4 px) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;

  /* Formes */
  --rayon-1: 2px;
  --rayon-2: 4px;
  --trait: 1px;
  --trait-fort: 2px;
  --trait-choix: 3px;

  /* Mise en page */
  --largeur-texte: 40rem;
  --largeur-page: 72rem;
  --marge-page: clamp(1rem, 4vw, 2.5rem);
  --cible-min: 2.75rem; /* 44 px : cibles tactiles (WCAG 2.5.8 en demande 24) */

  /* Mouvement */
  --duree-1: 120ms;
  --duree-2: 220ms;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Focus : double anneau visible sur tout fond (WCAG 2.4.7, 2.4.13) */
  --focus-interne: var(--fond);
  --focus-externe: var(--encre);
}

/* Thème sombre : préférence du système, sauf choix explicite du thème clair */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --fond: #111214;
    --fond-2: #191a1e;
    --surface: #1e1f24;
    --encre: #f1eee6;
    --encre-2: #c4bfb3;
    --encre-3: #a6a196;
    --filet: #303138;
    --filet-fort: #7b776d;
    --accent: #f1eee6;
    --sur-accent: #111214;
    --voile: rgb(0 0 0 / 0.65);
    --ombre-carte: 0 1px 0 rgb(0 0 0 / 0.4), 0 12px 28px -18px rgb(0 0 0 / 0.9);
    --ombre-levee: 0 1px 0 rgb(0 0 0 / 0.5), 0 18px 36px -16px rgb(0 0 0 / 1);
    --trame: rgb(241 238 230 / 0.05);
  }
}

/* Thème sombre choisi explicitement */
:root[data-theme='dark'] {
  color-scheme: dark;
  --fond: #111214;
  --fond-2: #191a1e;
  --surface: #1e1f24;
  --encre: #f1eee6;
  --encre-2: #c4bfb3;
  --encre-3: #a6a196;
  --filet: #303138;
  --filet-fort: #7b776d;
  --accent: #f1eee6;
  --sur-accent: #111214;
  --voile: rgb(0 0 0 / 0.65);
  --ombre-carte: 0 1px 0 rgb(0 0 0 / 0.4), 0 12px 28px -18px rgb(0 0 0 / 0.9);
  --ombre-levee: 0 1px 0 rgb(0 0 0 / 0.5), 0 18px 36px -16px rgb(0 0 0 / 1);
  --trame: rgb(241 238 230 / 0.05);
}

/* Contraste renforcé demandé par le système */
@media (prefers-contrast: more) {
  :root {
    --encre-2: var(--encre);
    --encre-3: var(--encre);
    --filet: var(--filet-fort);
  }
}