/*
 * Jetons de style SWSM-2026.
 *
 * Palette imposée par le client. Les six valeurs `--deep`, `--petrol`,
 * `--cyan`, `--aqua`, `--surface` et `--ink` sont reprises telles quelles et
 * ne doivent pas être modifiées.
 *
 * NOTE ACCESSIBILITÉ — mesure de contraste effectuée sur la palette :
 *   --cyan (#00A0DC) sur --surface (#EEF3F4)  = 2,66:1  -> échoue AA
 *   --cyan (#00A0DC) sur --deep    (#07222C)  = 5,53:1  -> conforme AA
 *   --aqua (#7FD8E8) sur --deep    (#07222C)  = 10,1:1  -> conforme AAA
 *   --ink  (#16303A) sur --surface (#EEF3F4)  = 12,4:1  -> conforme AAA
 *
 * Le cyan est donc utilisé pour les aplats d'action, les accents et les liens
 * SUR FOND SOMBRE, jamais comme couleur de texte sur fond clair. Pour les liens
 * en texte courant, on dérive `--link` (#0B6E92, 5,13:1 sur --surface), qui
 * appartient à la même famille chromatique et satisfait AA. La palette n'est
 * pas modifiée : on lui ajoute une teinte de service.
 */

:root {
  /* Palette imposée */
  --deep: #07222c;
  --petrol: #0e4a5c;
  --cyan: #00a0dc;
  --aqua: #7fd8e8;
  --surface: #eef3f4;
  --ink: #16303a;

  /* Teintes de service dérivées */
  --link: #0b6e92;          /* Liens en texte courant sur fond clair (AA). */
  --link-hover: #07222c;
  --white: #ffffff;
  --ink-muted: #4b6472;     /* Texte secondaire sur fond clair, 6,3:1. */
  --on-deep-muted: #b9d3dc; /* Texte secondaire sur fond sombre. */
  --rule: #cfdde1;          /* Filets et bordures sur fond clair. */
  --rule-deep: #1d4150;     /* Filets sur fond sombre. */
  --gold: #b5833a;          /* Marqueurs TODO en recette uniquement. */

  /*
   * Typographie — une seule famille sur tout le site, conformément au cahier
   * de production : titres en 600, texte courant en 400, mentions secondaires
   * en 300. `--font-alt` est disponible pour toute surface qui devrait rendre
   * du Calibri : la pile y place Calibri en premier, Carlito (substitut
   * métrique, OFL) prenant le relais chez qui ne l'a pas.
   */
  --font-display: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-alt: Calibri, 'Carlito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --weight-muted: 300;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.09rem);
  --step-1: clamp(1.20rem, 1.13rem + 0.35vw, 1.40rem);
  --step-2: clamp(1.44rem, 1.32rem + 0.60vw, 1.80rem);
  --step-3: clamp(1.73rem, 1.52rem + 1.05vw, 2.32rem);
  --step-4: clamp(2.07rem, 1.72rem + 1.75vw, 3.00rem);
  --step-5: clamp(2.30rem, 1.60rem + 3.50vw, 4.20rem);

  /* Espacement */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Structure */
  --measure: 68ch;
  --container: 76rem;
  --container-narrow: 46rem;
  --radius: 4px;
  --radius-lg: 8px;
  --border: 1px solid var(--rule);
  --focus-ring: 3px solid var(--cyan);
  --focus-offset: 2px;

  --shadow-s: 0 1px 2px rgb(7 34 44 / 8%), 0 2px 8px rgb(7 34 44 / 6%);
  --shadow-m: 0 2px 4px rgb(7 34 44 / 8%), 0 12px 28px rgb(7 34 44 / 10%);

  --transition: 160ms ease;
}

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