/* Tokens semantiques du design systeme toutech - v1.0 - 2026-08-06
   Les composants ne referencent QUE ces roles. Le mode sombre est un remapping
   de roles vers d'autres primitives, jamais une retouche de composant.
   Requiert tokens-primitifs.css (aucune couleur en dur ici). */

:root {
  --tt-surface: var(--tt-blanc);
  --tt-surface-2: var(--tt-neutre-10);
  --tt-surface-elevee: var(--tt-blanc);
  --tt-surface-inverse: var(--tt-neutre-100);
  --tt-text-primary: var(--tt-neutre-90);
  --tt-text-secondary: var(--tt-neutre-60);
  --tt-text-disabled: var(--tt-neutre-50);
  --tt-border: var(--tt-neutre-20);
  --tt-border-strong: var(--tt-neutre-40);
  --tt-interactive: var(--tt-marine-80);
  --tt-interactive-hover: var(--tt-marine-70);
  --tt-interactive-active: var(--tt-marine-90);
  --tt-on-interactive: var(--tt-neutre-10);
  --tt-lien: var(--tt-marine-60);
  --tt-focus-ring: var(--tt-marine-60); /* 7,87:1 sur blanc, >= 3:1 partout */
}

/* Mode sombre : remapping des roles, jamais un filtre (regle de la charte).
   Elevation par surface plus claire, pas par ombre. */
@media (prefers-color-scheme: dark) {
  :root {
    --tt-surface: var(--tt-neutre-100);
    --tt-surface-2: var(--tt-neutre-90);
    --tt-surface-elevee: var(--tt-neutre-80);
    --tt-surface-inverse: var(--tt-neutre-10);
    --tt-text-primary: var(--tt-neutre-10);
    --tt-text-secondary: var(--tt-neutre-30);
    --tt-text-disabled: var(--tt-neutre-50);
    --tt-border: var(--tt-neutre-80);
    --tt-border-strong: var(--tt-neutre-60);
    --tt-interactive: var(--tt-marine-30);
    --tt-interactive-hover: var(--tt-marine-20);
    --tt-interactive-active: var(--tt-marine-40);
    --tt-on-interactive: var(--tt-neutre-100);
    --tt-lien: var(--tt-marine-30);
    --tt-focus-ring: var(--tt-marine-30); /* 8,43:1 sur #141B21 */
    --tt-elevation-1: none;
    --tt-elevation-2: none;
    --tt-elevation-3: none;
  }
}

/* Bascule manuelle : data-theme prime sur la preference systeme. */
:root[data-theme='dark'] {
  --tt-surface: var(--tt-neutre-100);
  --tt-surface-2: var(--tt-neutre-90);
  --tt-surface-elevee: var(--tt-neutre-80);
  --tt-surface-inverse: var(--tt-neutre-10);
  --tt-text-primary: var(--tt-neutre-10);
  --tt-text-secondary: var(--tt-neutre-30);
  --tt-text-disabled: var(--tt-neutre-50);
  --tt-border: var(--tt-neutre-80);
  --tt-border-strong: var(--tt-neutre-60);
  --tt-interactive: var(--tt-marine-30);
  --tt-interactive-hover: var(--tt-marine-20);
  --tt-interactive-active: var(--tt-marine-40);
  --tt-on-interactive: var(--tt-neutre-100);
  --tt-lien: var(--tt-marine-30);
  --tt-focus-ring: var(--tt-marine-30);
  --tt-elevation-1: none;
  --tt-elevation-2: none;
  --tt-elevation-3: none;
}

:root[data-theme='light'] {
  --tt-surface: var(--tt-blanc);
  --tt-surface-2: var(--tt-neutre-10);
  --tt-surface-elevee: var(--tt-blanc);
  --tt-surface-inverse: var(--tt-neutre-100);
  --tt-text-primary: var(--tt-neutre-90);
  --tt-text-secondary: var(--tt-neutre-60);
  --tt-text-disabled: var(--tt-neutre-50);
  --tt-border: var(--tt-neutre-20);
  --tt-border-strong: var(--tt-neutre-40);
  --tt-interactive: var(--tt-marine-80);
  --tt-interactive-hover: var(--tt-marine-70);
  --tt-interactive-active: var(--tt-marine-90);
  --tt-on-interactive: var(--tt-neutre-10);
  --tt-lien: var(--tt-marine-60);
  --tt-focus-ring: var(--tt-marine-60);
  --tt-elevation-1: var(--tt-ombre-1);
  --tt-elevation-2: var(--tt-ombre-2);
  --tt-elevation-3: var(--tt-ombre-3);
}

/* Focus visible : anneau 2px decale de 2px, jamais supprime. */
:focus-visible {
  outline: 2px solid var(--tt-focus-ring);
  outline-offset: 2px;
}