/* Identité : monochrome par défaut, teinte personnalisable par l'utilisateur.
   Les variables --hue et --lum sont écrites par js/theme.js depuis les réglages. */

:root {
  --hue: 0;
  --lum: 0;            /* -100 (sombre) → +100 (clair) ; 0 = monochrome pur */

  --bg:#0C0E11; --surface:#14171C; --surface-2:#1A1E25; --surface-3:#20252E;
  --ink:#F1F3F6; --ink-2:#8B94A1; --ink-3:#5A626E; --line:#262B34;
  --accent:#EDEFF2; --on-accent:#101318;
  --accent-soft:color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 40%, transparent);

  --good:#37B98C; --good-soft:color-mix(in srgb, var(--good) 15%, transparent);
  --miss:#E4726F; --miss-soft:color-mix(in srgb, var(--miss) 15%, transparent);
  --warn:#D9A441;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.55);
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --pad:20px;
  --tap:48px;          /* cible tactile minimale, utilisable avec des gants */
}

:root[data-theme="light"] {
  --bg:#E9ECF1; --surface:#FFFFFF; --surface-2:#F4F6F9; --surface-3:#EDF0F4;
  --ink:#10151D; --ink-2:#5C6673; --ink-3:#98A1AE; --line:#E1E5EC;
  --accent:#111417; --on-accent:#FFFFFF;
  --good:#1E9A70; --miss:#C9504D;
  --shadow:0 1px 2px rgba(15,21,29,.06), 0 12px 34px rgba(15,21,29,.14);
}

/* Teinte personnalisée : appliquée seulement si l'utilisateur a bougé le curseur.
   La luminosité est bornée pour garantir le contraste avec le fond. */
:root[data-tint="on"] {
  --accent: hsl(var(--hue) 62% calc(72% + var(--lum) * 0.18%));
  --on-accent:#0B0D10;
}
:root[data-theme="light"][data-tint="on"] {
  --accent: hsl(var(--hue) 58% calc(34% + var(--lum) * 0.14%));
  --on-accent:#FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}