/* tokens.css — le contrat de couleurs, typo, espace et mouvement du GUI.
   Une seule source : aucune couleur en dur dans les templates. Deux palettes complètes
   (clair par défaut, sombre par préférence système ou data-theme), toutes AA sur --surface.
   Les anciens noms (--green, --red, --purple…) restent servis : ils pointent sur les tokens
   sémantiques, ce qui rend les pages non migrées correctes dans les deux thèmes. */
:root {
  color-scheme: light dark;
  /* Neutres */
  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #eaeef3; --surface-3: #dfe5ec;
  --border: #d5dbe4; --border-strong: #b3bdca;
  --text: #0f172a; --text-2: #334155; --muted: #5b6776; --disabled: #9aa5b1;
  /* Accent et sémantiques : couleur nue = texte sur --surface ou fond de bouton plein ;
     -soft = fond de badge/alerte ; -fg = texte posé sur -soft. */
  --accent: #0369a1; --accent-fg: #ffffff; --accent-soft: #e0f2fe; --accent-hover: #075985;
  --ok: #15803d;     --ok-soft: #dcfce7;     --ok-fg: #14532d;
  --warn: #b45309;   --warn-soft: #fef3c7;   --warn-fg: #78350f;
  --danger: #b91c1c; --danger-soft: #fee2e2; --danger-fg: #7f1d1d;
  --info: #1d4ed8;   --info-soft: #dbeafe;   --info-fg: #1e3a8a;
  --brand-2: #6d28d9; --brand-2-soft: #ede9fe; --brand-2-fg: #4c1d95;
  --orange: #c2410c; --orange-soft: #ffedd5;
  /* Séries de graphes */
  --serie-1: #0369a1; --serie-2: #c2410c; --serie-3: #15803d; --serie-4: #6d28d9;
  --serie-5: #be185d; --serie-6: #0f766e;
  --grid: color-mix(in srgb, var(--muted) 18%, transparent);
  --hover: color-mix(in srgb, var(--text) 4%, transparent);
  --selected: color-mix(in srgb, var(--accent) 10%, transparent);
  --shadow-1: 0 1px 2px rgba(15,23,42,.08);
  --shadow-2: 0 4px 16px rgba(15,23,42,.12);
  --shadow-3: 0 12px 40px rgba(15,23,42,.18);
  --backdrop: rgba(15,23,42,.45);
  /* Typo */
  --font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-lg: 1rem;
  --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem;
  --lh: 1.5; --lh-tight: 1.25;
  /* Espace (base 4 px) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-8: 3rem;
  /* Forme */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  /* Cibles et couches */
  --hit: 44px; --hit-sm: 34px;
  --z-sticky: 10; --z-bar: 40; --z-panel: 50; --z-drawer: 60; --z-tray: 70;
  --z-modal: 100; --z-toast: 110; --z-lightbox: 120;
  --nav-h: 52px; --panel-w: 40%;
  /* Mouvement */
  --d-fast: 120ms; --d-base: 200ms; --d-slow: 320ms;
  --e-out: cubic-bezier(.2,0,0,1); --e-in-out: cubic-bezier(.4,0,.2,1);
  --e-spring: cubic-bezier(.34,1.4,.64,1);

  /* Anciens noms — servis, jamais redéfinis ailleurs */
  --green: var(--ok); --yellow: var(--warn); --red: var(--danger); --blue: var(--info);
  --purple: var(--brand-2); --indigo: var(--info); --bg2: var(--surface-2);
  --grille: var(--grid); --shadow: var(--shadow-1); --shadow-hover: var(--shadow-2);
}

/* Sombre : même contrat, valeurs recalées. Deux blocs identiques : la préférence système
   (sauf choix explicite « clair ») et le choix explicite « sombre ». */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --surface: #131c2e; --surface-2: #1b2639; --surface-3: #243149;
    --border: #26324a; --border-strong: #3b4a66;
    --text: #e5e9f0; --text-2: #c3cbd8; --muted: #94a3b8; --disabled: #5b6776;
    --accent: #38bdf8; --accent-fg: #0b1220; --accent-soft: #0c2a3d; --accent-hover: #7dd3fc;
    --ok: #4ade80;     --ok-soft: #0f2e1b;     --ok-fg: #bbf7d0;
    --warn: #fbbf24;   --warn-soft: #3a2a08;   --warn-fg: #fde68a;
    --danger: #f87171; --danger-soft: #3f1414; --danger-fg: #fecaca;
    --info: #60a5fa;   --info-soft: #122a4a;   --info-fg: #bfdbfe;
    --brand-2: #a78bfa; --brand-2-soft: #2a1f4a; --brand-2-fg: #ddd6fe;
    --orange: #fb923c; --orange-soft: #3d1f0a;
    --serie-1: #38bdf8; --serie-2: #fb923c; --serie-3: #4ade80; --serie-4: #a78bfa;
    --serie-5: #f472b6; --serie-6: #2dd4bf;
    --hover: rgba(255,255,255,.03);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 16px rgba(0,0,0,.5);
    --shadow-3: 0 12px 40px rgba(0,0,0,.6); --backdrop: rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220; --surface: #131c2e; --surface-2: #1b2639; --surface-3: #243149;
  --border: #26324a; --border-strong: #3b4a66;
  --text: #e5e9f0; --text-2: #c3cbd8; --muted: #94a3b8; --disabled: #5b6776;
  --accent: #38bdf8; --accent-fg: #0b1220; --accent-soft: #0c2a3d; --accent-hover: #7dd3fc;
  --ok: #4ade80;     --ok-soft: #0f2e1b;     --ok-fg: #bbf7d0;
  --warn: #fbbf24;   --warn-soft: #3a2a08;   --warn-fg: #fde68a;
  --danger: #f87171; --danger-soft: #3f1414; --danger-fg: #fecaca;
  --info: #60a5fa;   --info-soft: #122a4a;   --info-fg: #bfdbfe;
  --brand-2: #a78bfa; --brand-2-soft: #2a1f4a; --brand-2-fg: #ddd6fe;
  --orange: #fb923c; --orange-soft: #3d1f0a;
  --serie-1: #38bdf8; --serie-2: #fb923c; --serie-3: #4ade80; --serie-4: #a78bfa;
  --serie-5: #f472b6; --serie-6: #2dd4bf;
  --hover: rgba(255,255,255,.03);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 16px rgba(0,0,0,.5);
  --shadow-3: 0 12px 40px rgba(0,0,0,.6); --backdrop: rgba(0,0,0,.6);
}

/* Mouvement réduit : tout devient instantané, sans exception. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}