/* Jetons de couleur, typographie et mouvement (§8.3, §8.7, §8.9). Clair par défaut, sombre selon le système ou le choix. */

:root {
  --bg: #EEECE7;
  /* Surfaces à 254/255 d'opacité, invisible à l'œil : un panneau parfaitement opaque posé sur la carte laisse Chrome
     sauter le dessin de la carte dessous, et la zone ne se redessine pas toujours quand il bouge ou disparaît
     (rectangles couleur du fond de page). Un panneau très légèrement translucide n'a plus cet effet. */
  --surface: #F7F6F2FE;
  --ink: #1F2124;
  --muted: #6B6F73;
  --line: #D8D5CE;
  --slate: #4A5560;
  --sage: #7D9178;
  --brick: #A6574A;
  --ochre: #B08A4E;
  --voile: rgba(31, 33, 36, 0.06);
  --ombre: 0 1px 2px rgba(31, 33, 36, 0.06), 0 8px 24px rgba(31, 33, 36, 0.08);
  /* Éléments posés sur la carte (recherche, bouton clair/sombre, tirette, boutons de la carte) : ombre douce, plus
     marquée en dessous, comme une fenêtre qui flotte (Laurent, 28/10/2026). */
  --ombre-flottante: 0 3px 6px rgba(31, 33, 36, 0.18), 0 14px 30px -4px rgba(31, 33, 36, 0.42);
  --squelette: #E4E1DA;
  /* En-tête du dossier (03/11/2026) : tuiles et croix posées par une ombre, sur une surface un peu plus claire. */
  --surface-relief: #FFFFFF;
  /* Couleur des cases cochées et des curseurs (03/11/2026, Laurent : « une autre couleur que le gris pour les coches »,
     puis bleu ardoise retenu parmi six propositions : docs/maquettes/couleur-coches). */
  --accent: #3B5B8C;
  --ombre-bouton: 0 1px 2px rgba(31, 33, 36, 0.10), 0 4px 10px -2px rgba(31, 33, 36, 0.16);
  --ombre-bouton-survol: 0 2px 4px rgba(31, 33, 36, 0.12), 0 8px 18px -4px rgba(31, 33, 36, 0.26);

  --police-titre: "Fraunces", Georgia, serif;
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-28: 28px; --t-44: 44px;

  --courbe: cubic-bezier(.2, .7, .2, 1);
  --duree: 200ms;
  --rayon: 10px;
  --panneau: 420px;
  color-scheme: light;
  accent-color: var(--accent);
}

:root[data-theme="sombre"] {
  --bg: #141516;
  --surface: #1C1E20FE;
  --ink: #E6E3DC;
  --muted: #8E9195;
  --line: #2C2F33;
  --slate: #8C99A6;
  --sage: #8FA48A;
  --brick: #C07062;
  --ochre: #C49C5E;
  --voile: rgba(230, 227, 220, 0.06);
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --ombre-flottante: 0 3px 6px rgba(0, 0, 0, 0.45), 0 14px 30px -4px rgba(0, 0, 0, 0.75);
  --squelette: #26292C;
  --surface-relief: #25282B;
  --accent: #7FA2D6;
  --ombre-bouton: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 10px -2px rgba(0, 0, 0, 0.6);
  --ombre-bouton-survol: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 18px -4px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
  /* Cases à cocher et curseurs : le bleu ardoise plutôt que le bleu vif du navigateur (03/11/2026). */
  accent-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duree: 0ms; }
}