/*
 * Jetons visuels (§6, §7.7).
 *
 * Trois modes : clair, sombre, contraste élevé. Aucune information n'est portée
 * par la seule couleur : les états portent aussi un mot. Les tailles sont en rem
 * pour que le zoom à 400 % reste une mise en page en flux, jamais un défilement
 * horizontal.
 */

:root {
  color-scheme: light dark;

  --lab-fond: #fbfafc;
  --lab-surface: #ffffff;
  --lab-encre: #1a1726;
  --lab-encre-douce: #56526b;
  --lab-filet: #dedce6;
  --lab-accent: #4a3fa8;
  --lab-accent-encre: #3a3186;

  --lab-ok: #1f6b45;
  --lab-attention: #8a5a00;
  --lab-critique: #a32222;

  --lab-focus-epaisseur: 3px;
  --lab-focus-decalage: 2px;
  --lab-cible-minimale: 2.75rem; /* 44 px : cible tactile minimale */
  --lab-mesure: 68ch; /* longueur de ligne confortable */

  --lab-espace-1: 0.25rem;
  --lab-espace-2: 0.5rem;
  --lab-espace-3: 1rem;
  --lab-espace-4: 1.5rem;
  --lab-espace-5: 2.5rem;

  --lab-duree: 150ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --lab-fond: #14121c;
    --lab-surface: #1c1927;
    --lab-encre: #edebf2;
    --lab-encre-douce: #a8a2bc;
    --lab-filet: #2e2a3d;
    --lab-accent: #a79bff;
    --lab-accent-encre: #c0b7ff;
    --lab-ok: #6fcf9b;
    --lab-attention: #e0b060;
    --lab-critique: #ff8f8f;
  }
}

:root[data-theme='dark'] {
  --lab-fond: #14121c;
  --lab-surface: #1c1927;
  --lab-encre: #edebf2;
  --lab-encre-douce: #a8a2bc;
  --lab-filet: #2e2a3d;
  --lab-accent: #a79bff;
  --lab-accent-encre: #c0b7ff;
  --lab-ok: #6fcf9b;
  --lab-attention: #e0b060;
  --lab-critique: #ff8f8f;
}

/* Contraste élevé : demandé explicitement par l'utilisateur, il prime sur tout. */
:root[data-contraste='eleve'] {
  --lab-fond: #000000;
  --lab-surface: #000000;
  --lab-encre: #ffffff;
  --lab-encre-douce: #ffffff;
  --lab-filet: #ffffff;
  --lab-accent: #ffff00;
  --lab-accent-encre: #ffff00;
  --lab-ok: #00ff00;
  --lab-attention: #ffff00;
  --lab-critique: #ff6666;
}

/* Le focus est toujours visible et ne peut pas être supprimé (§6). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--lab-focus-epaisseur) solid var(--lab-accent);
  outline-offset: var(--lab-focus-decalage);
}

/* Le conteneur d'étape reçoit le focus : il n'apparaît pas dans la tabulation. */
[data-lab-etape] {
  outline: none;
}
[data-lab-etape]:focus-visible {
  outline: var(--lab-focus-epaisseur) solid var(--lab-accent);
  outline-offset: var(--lab-focus-decalage);
}

:where(button, [role='button'], a.lab-action) {
  min-height: var(--lab-cible-minimale);
  min-width: var(--lab-cible-minimale);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}