/* =============================================================================
   Jetons — Memorengine
   Source unique de toute valeur. Aucune couleur, aucune taille en dur ailleurs.

   Les ratios annoncés en commentaire sont MESURÉS, pas estimés (CORE-DEC-012).
   Un chiffre écrit à la main qui n'a pas été recalculé est une assertion.

   Les couleurs de marque et l'encre du thème clair sont alignées sur les jetons
   générés de la console EMS : c'est elle qui porte la cible de 5,5, plus stricte
   que les 4,5 de la norme. Toute divergence entre les deux est un défaut.

   Trois rôles de la console n'ont pas d'emploi ici et sont absents : `diff-add`
   et `diff-del`, qui teintent les lignes d'un différentiel, et `primary-light`,
   la surface teintée. Le jour où l'un arrive, c'est lui qui bornera les textes —
   c'est ce qui s'est produit côté console.
   ============================================================================= */

:root {
  /* ---- Typographie -------------------------------------------------------
     Tout en rem, pour suivre la taille de police de base du lecteur
     (WCAG 1.4.4, 1.4.12). Un terme fluide mêle un rem et un vw : un vw seul
     ignorerait cette préférence. Le rapport max/min ne dépasse jamais 2,5,
     au-delà duquel un texte fluide cesse de passer 1.4.4 au zoom 200 %. */
  --font-sans: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Charis SIL', Georgia, 'Times New Roman', serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SFMono-Regular', monospace;

  --text-xs: clamp(0.75rem, 0.7321rem + 0.0893vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.857rem + 0.0893vw, 0.9375rem);
  --text-base: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.0536rem + 0.3571vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.1071rem + 0.7143vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.5536rem + 1.6071vw, 3rem);

  /* Sans unité : elles suivent la taille de police.
     `normal` est le plancher de 1,5 que WCAG 1.4.12 impose de supporter. */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.8;

  /* En ch : une ligne se lit en caractères, la plage confortable est 45–75. */
  --measure: 74ch;
  --measure-narrow: 60ch;

  /* ---- Espacement --------------------------------------------------------
     En rem : un écart en pixels ignorerait la taille de police de base. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  /* ---- Cibles ------------------------------------------------------------
     En pixels CSS, l'unité dans laquelle WCAG 2.5.8 les définit : en rem, un
     lecteur qui réduit sa police de base ferait passer une cible sous le
     plancher de 24 px. */
  --target-min: 24px;
  --target-comfortable: 44px;

  --shell-max: 72rem;
  --nav-h: 4rem;
}

/* =============================================================================
   Thème sombre — le défaut
   Rampe : teinte 245, saturation 17,5 %, clartés 5 / 11 / 17 %.
   `raised` à 17 % est LA contrainte : au-dessus, `error` cesse de tenir 5,5:1.
   C'est toujours `error` qui fixe la borne, pas la couleur de marque.
   ============================================================================= */

:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  --color-canvas: #0b0b0f;
  --color-surface: #181721;
  --color-surface-raised: #252433;

  --color-text-primary: #ffffff;
  /* 19.64 / 17.75 / 15.23 */
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  /* 9.70 / 9.09 / 8.16 */
  --color-text-muted: rgba(255, 255, 255, 0.55);
  /* 6.24 / 6.10 / 5.60 */

  /* Le survol ÉCLAIRCIT : un contrôle qui répond doit avancer, pas reculer.
     C'est ce qui a fixé la base — le survol est la clarté la plus vive où
     l'encre blanche tient encore la cible de 5,5, donc la base est un cran en
     deçà pour lui laisser la place. */
  --color-primary: #7e30c2;
  --color-primary-ink: #ffffff;
  /* 6.80:1 sur primary */
  --color-primary-hover: #8d41d0;
  --color-primary-hover-ink: #ffffff;
  /* 5.53:1 sur primary-hover */
  --color-primary-text: #bc90e3;
  /* 7.71 / 6.96 / 5.97 — texte et anneau de focus */

  /* `primary-text` et non `primary` pour l'anneau de focus : il relève de
     WCAG 1.4.11 et doit tenir 3:1 contre ce qui l'entoure, alors que `primary`
     est fait pour porter de l'encre, pas pour être vu. */
  --color-control-border: rgba(255, 255, 255, 0.34);
  /* 3.04 / 3.12 / 3.03 — WCAG 1.4.11 */
  --color-divider: rgba(255, 255, 255, 0.08);
  --color-card-bg: rgba(255, 255, 255, 0.04);
  --color-card-border: rgba(255, 255, 255, 0.08);

  --color-ok: #4ade80;
  /* 11.27 / 10.18 / 8.74 */
  --color-warn: #fbbf24;
  /* 11.77 / 10.63 / 9.12 */
  --color-error: #f87171;
  /* 7.10 / 6.42 / 5.51 — le plus serré, il fixe `raised` */
  --color-unchecked: #a78bfa;
  /* 7.22 / 6.52 / 5.60 */
}

/* =============================================================================
   Thème clair
   Le blanc est un mur : aucune marge côté fond, donc ce sont les premiers plans
   qui bougent. La polarité n'est pas symétrique.
   ============================================================================= */

:root[data-theme='light'] {
  color-scheme: light;

  --color-canvas: #faf9fc;
  --color-surface: #ffffff;
  --color-surface-raised: #f4f2f7;

  /* L'encre de la console : un noir bleuté, pas un gris neutre. */
  --color-text-primary: #1a1a2e;
  /* 16.26 / 17.06 / 15.34 */
  --color-text-secondary: rgba(26, 26, 46, 0.72);
  /* 6.63 / 6.77 / 6.45 */
  --color-text-muted: rgba(26, 26, 46, 0.68);
  /* 5.78 / 5.91 / 5.62 */

  /* Le même remplissage qu'en sombre : une primitive, un usage. Il porte de
     l'encre blanche des deux côtés, donc rien n'oblige à le dédoubler. */
  --color-primary: #7e30c2;
  --color-primary-ink: #ffffff;
  /* 6.80:1 sur primary */
  --color-primary-hover: #8d41d0;
  --color-primary-hover-ink: #ffffff;
  /* 5.53:1 sur primary-hover */
  /* Sa clarté est bornée par la surface teintée de la console, pas par les
     surfaces pleines : un cran plus clair et la cible est perdue là-bas. */
  --color-primary-text: #7a2fbb;
  /* 6.78 / 7.11 / 6.40 */

  --color-control-border: rgba(26, 26, 46, 0.48);
  /* 3.09 / 3.12 / 3.06 — WCAG 1.4.11 */
  --color-divider: rgba(26, 26, 46, 0.1);
  --color-card-bg: rgba(26, 26, 46, 0.03);
  --color-card-border: rgba(26, 26, 46, 0.09);

  --color-ok: #127035;
  /* 5.90 / 6.19 / 5.56 */
  --color-warn: #9f4908;
  /* 5.84 / 6.12 / 5.51 */
  --color-error: #b91c1c;
  /* 6.17 / 6.47 / 5.82 */
  --color-unchecked: #6d28d9;
  /* 6.77 / 7.10 / 6.39 */
}

/* =============================================================================
   Contraste renforcé
   Ce n'est pas un rattrapage d'accessibilité : c'est un thème du système de
   design. La hiérarchie de texte s'y aplatit délibérément, au profit de la
   lisibilité.

   ⚠️ Ce thème n'existe pas dans la console : ses jetons ne déclarent que `dark`
   et `light`. Ses valeurs sont donc dérivées ici, sur la même teinte, et elles
   seront à reporter le jour où la console le posera.
   ============================================================================= */

:root[data-theme='contrast'] {
  color-scheme: dark;

  --color-canvas: #000000;
  --color-surface: #000000;
  --color-surface-raised: #000000;

  --color-text-primary: #ffffff;
  /* 21:1 */
  --color-text-secondary: #ffffff;
  --color-text-muted: #ffffff;

  /* Une seule valeur sert de texte ET de remplissage : elle est éclaircie
     jusqu'à tenir 7:1 sur noir dans les deux sens. Le survol va au blanc, seul
     endroit où il reste de la marge. */
  --color-primary: #b380e0;
  /* noir dessus 7.08:1 */
  --color-primary-ink: #000000;
  --color-primary-hover: #ffffff;
  --color-primary-hover-ink: #000000;
  /* 21:1 */
  --color-primary-text: #b380e0;
  /* 7.08:1 sur noir */

  --color-control-border: #ffffff;
  /* Un séparateur ne porte aucune information : à blanc plein il pèserait plus
     qu'un titre. Il reste visible — 6,08:1 — sans tirer l'œil. */
  --color-divider: #8a8a8a;
  --color-card-bg: #000000;
  --color-card-border: #ffffff;

  --color-ok: #4ade80;
  --color-warn: #fbbf24;
  --color-error: #f87171;
  --color-unchecked: #c4b5fd;
}

/* =============================================================================
   La préférence système fixe la valeur initiale.

   ⚠️ Ce bloc DUPLIQUE le thème clair, et cette duplication a déjà produit un
   défaut : ses trois violets s'étaient retrouvés permutés, si bien qu'un lecteur
   dont le système est en clair voyait une palette différente de celui qui
   cliquait sur « clair ». Rien ne vérifie que les deux copies s'accordent.

   La forme qui l'éliminerait : ne rien mettre ici, et laisser un script poser
   `data-theme` au chargement d'après `prefers-color-scheme` — ce que `theme.js`
   fait déjà. Le prix est un clignotement avant l'exécution du script, qu'un
   script en ligne dans le `<head>` supprimerait. Arbitrage non tranché.
   ============================================================================= */

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --color-canvas: #faf9fc;
    --color-surface: #ffffff;
    --color-surface-raised: #f4f2f7;

    --color-text-primary: #1a1a2e;
    --color-text-secondary: rgba(26, 26, 46, 0.72);
    --color-text-muted: rgba(26, 26, 46, 0.68);

    --color-primary: #7e30c2;
    --color-primary-ink: #ffffff;
    --color-primary-hover: #8d41d0;
    --color-primary-hover-ink: #ffffff;
    --color-primary-text: #7a2fbb;

    --color-control-border: rgba(26, 26, 46, 0.48);
    --color-divider: rgba(26, 26, 46, 0.1);
    --color-card-bg: rgba(26, 26, 46, 0.03);
    --color-card-border: rgba(26, 26, 46, 0.09);

    --color-ok: #127035;
    --color-warn: #9f4908;
    --color-error: #b91c1c;
    --color-unchecked: #6d28d9;
  }
}