/* ============================================================
   design-tokens.css — Dashboard de Brad
   Source unique des variables CSS — ne pas dupliquer dans les HTML
   Dernière mise à jour — mai 2026
   ============================================================ */

:root{
  /* Surfaces */
  --bg:#f4f2ee;--surface:#ffffff;--surface2:#ede9e3;--surface3:#e6e1da;
  /* Borders */
  --border:rgba(0,0,0,.08);--border-md:rgba(0,0,0,.14);
  /* Ring — invisible en light, liseré subtil en dark pour délimiter les cartes */
  --ring:transparent;
  /* Text */
  --text:#181714;--text2:#6a6760;--text3:#7a7874;
  /* Semantic colours */
  --green:#1a9e6e;--green-bg:#e3f5ed;--green-text:#0a5c3e;
  --red:#d04a39;--red-bg:#fdecea;--red-text:#7a2318;
  --blue:#2563eb;--blue-bg:#dbeafe;--blue-text:#1e40af;
  --amber:#b87318;--amber-bg:#fdf2df;--amber-text:#663d06;
  /* Neutral — badges informatifs (ex: "Bientôt"), pas d'urgence */
  --neutral-bg:#ede9e3;--neutral-text:#7a7874;
  --purple-bg:#edeafd;--purple-text:#3a2e82;
  /* Layout */
  --header-h:56px;      /* hauteur barre de navigation */
  --logo-sz:30px;       /* taille logo/avatar carré */
  /* Spacing scale (4px base) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  /* Radius */
  --r:12px;--r-sm:8px;--r-xs:4px;
  /* Shadows */
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 2px 8px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.05);
}

/* ── Dark mode système ── */
@media(prefers-color-scheme:dark){:root{
  --bg:#111110;--surface:#1c1c1a;--surface2:#242422;--surface3:#2e2e2b;
  --border:rgba(255,255,255,.08);--border-md:rgba(255,255,255,.15);
  --ring:rgba(255,255,255,.05);
  --text:#f0ede8;--text2:#9a9790;--text3:#8a8780;
  --green:#22c47f;--green-bg:#0a2e1f;--green-text:#6ee8b4;
  --red:#f06b5a;--red-bg:#2a100d;--red-text:#f9b4ac;
  --blue:#3b82f6;--blue-bg:#1e3a5f;--blue-text:#93c5fd;
  --amber:#e8a030;--amber-bg:#2a1a04;--amber-text:#f5cc82;
  --neutral-bg:#2e2e2b;--neutral-text:#8a8780;
  --purple-bg:#1e1840;--purple-text:#b0a8f8;
}}

/* ── Dark mode forcé (toggle utilisateur) ── */
body.dark-forced{
  --bg:#111110;--surface:#1c1c1a;--surface2:#242422;--surface3:#2e2e2b;
  --border:rgba(255,255,255,.08);--border-md:rgba(255,255,255,.15);
  --ring:rgba(255,255,255,.05);
  --text:#f0ede8;--text2:#9a9790;--text3:#8a8780;
  --green:#22c47f;--green-bg:#0a2e1f;--green-text:#6ee8b4;
  --red:#f06b5a;--red-bg:#2a100d;--red-text:#f9b4ac;
  --blue:#3b82f6;--blue-bg:#1e3a5f;--blue-text:#93c5fd;
  --amber:#e8a030;--amber-bg:#2a1a04;--amber-text:#f5cc82;
  --neutral-bg:#2e2e2b;--neutral-text:#8a8780;
  --purple-bg:#1e1840;--purple-text:#b0a8f8;
}

/* ── Light mode forcé (toggle utilisateur) ── */
body.light-forced{
  --bg:#f4f2ee;--surface:#ffffff;--surface2:#ede9e3;--surface3:#e6e1da;
  --border:rgba(0,0,0,.08);--border-md:rgba(0,0,0,.14);
  --ring:transparent;
  --text:#181714;--text2:#6a6760;--text3:#7a7874;
  --green:#1a9e6e;--green-bg:#e3f5ed;--green-text:#0a5c3e;
  --red:#d04a39;--red-bg:#fdecea;--red-text:#7a2318;
  --blue:#2563eb;--blue-bg:#dbeafe;--blue-text:#1e40af;
  --amber:#b87318;--amber-bg:#fdf2df;--amber-text:#663d06;
  --neutral-bg:#ede9e3;--neutral-text:#7a7874;
  --purple-bg:#edeafd;--purple-text:#3a2e82;
}