:root {
  color-scheme: light;
  --blanc: #ffffff;
  --perle: #f3f1ec;
  --encre: #23262a;
  --formica: #3e93a0;
  --formica-fonce: #236774;
  --sur-formica: #151719;
  --moutarde: #e3b23c;
  --vermillon: #d0452e;
  --vermillon-fonce: #ad321f;
  --ardoise: #2f3a3a;
  --gris: #646b6b;
  --filet: #d9d9d4;
  --succes: #2f6b4f;
  --erreur: #a62f27;

  --font-display: "Alfa Slab One", Rockwell, "Roboto Slab", serif;
  --font-texte: Karla, "Segoe UI", Arial, sans-serif;

  --fs-13: 0.8125rem;
  --fs-15: 0.9375rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-40: clamp(2rem, 4vw, 2.5rem);
  --fs-54: clamp(2.5rem, 6vw, 3.375rem);

  --lh-serre: 1.12;
  --lh-titre: 1.25;
  --lh-texte: 1.55;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;

  --r-petit: 4px;
  --r-champ: 7px;
  --r-plaque: 10px;
  --r-rond: 999px;

  --conteneur: 75rem;
  --lecture: 45rem;
  --focus: 0 0 0 3px rgba(35, 103, 116, 0.28);
  --duree: 160ms;
}

@media (min-width: 62rem) {
  :root {
    --fs-corps: 1.125rem;
  }
}

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