/*
 * Jetons du thème MasterLab (clair / sombre).
 * Source unique des couleurs utilisées hors Tailwind (MyCSS.css : tom-select, SweetAlert, squelettes…)
 * et des couleurs « primary », « surface », « bord » de static/js/ui/tailwind-config.js.
 * Valeurs RGB séparées par des espaces : rgb(var(--ml-primary-600) / 0.25) permet l'opacité.
 * Le sombre suit la classe "dark" posée sur <html> par theme.js.
 */
:root {
  /* Marque : émeraude (palette Tailwind emerald) */
  --ml-primary-50: 236 253 245;
  --ml-primary-100: 209 250 229;
  --ml-primary-200: 167 243 208;
  --ml-primary-300: 110 231 183;
  --ml-primary-400: 52 211 153;
  --ml-primary-500: 16 185 129;
  --ml-primary-600: 5 150 105;
  --ml-primary-700: 4 120 87;
  --ml-primary-800: 6 95 70;
  --ml-primary-900: 6 78 59;
  --ml-primary-950: 2 44 34;

  /* Surfaces, bordures et textes (palette gray) */
  --ml-fond: 249 250 251;          /* gray-50 : fond de page */
  --ml-surface: 255 255 255;       /* cartes, champs, menus */
  --ml-surface-2: 249 250 251;     /* champs en retrait, zones secondaires */
  --ml-surface-3: 243 244 246;     /* survol, squelettes */
  --ml-bord: 209 213 219;          /* gray-300 : champs */
  --ml-bord-doux: 229 231 235;     /* gray-200 : séparateurs, cartes */
  --ml-texte: 17 24 39;            /* gray-900 */
  --ml-texte-doux: 107 114 128;    /* gray-500 */
  --ml-texte-pale: 156 163 175;    /* gray-400 */

  --ml-anneau: rgb(var(--ml-primary-500) / 0.25);
  --ml-ombre-menu: 0 12px 28px -8px rgb(0 0 0 / 0.18);

  --ml-police: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ml-police-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html.dark {
  --ml-fond: 17 24 39;             /* gray-900 */
  --ml-surface: 31 41 55;          /* gray-800 */
  --ml-surface-2: 17 24 39;        /* gray-900 */
  --ml-surface-3: 55 65 81;        /* gray-700 */
  --ml-bord: 55 65 81;             /* gray-700 */
  --ml-bord-doux: 55 65 81;
  --ml-texte: 249 250 251;         /* gray-50 */
  --ml-texte-doux: 156 163 175;    /* gray-400 */
  --ml-texte-pale: 107 114 128;    /* gray-500 */

  --ml-ombre-menu: 0 12px 28px -8px rgb(0 0 0 / 0.5);
}

body { font-family: var(--ml-police); }

/* Focus clavier : contour de la marque par défaut. Spécificité nulle (:where) : un composant qui pose
   son propre anneau (focus-visible:ring-…, outline-none) l'emporte ; les champs gardent le leur. */
:where(a[href], button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid rgb(var(--ml-primary-500));
  outline-offset: 2px;
}

/* Barres de défilement teintées (la couleur se transmet) ; fines dans les zones intérieures, normale pour la page */
:root { scrollbar-color: rgb(var(--ml-texte-pale) / 0.55) transparent; }
body * { scrollbar-width: thin; }