/* ════════════════════════════════════════════════════════════════
   Marketing360 — Système de thèmes
   ─────────────────────────────────────────────────────────────────
   IMPORTANT : les VARIABLES CSS sont appliquées DYNAMIQUEMENT par
   js/core/theme.js via inline-styles sur <html>. Cette feuille ne
   définit que les valeurs PAR DÉFAUT au tout 1er chargement (avant
   que JS ne s'initialise) pour éviter le "flash of unstyled
   content". JS écrase ensuite avec les bonnes vars.
   ════════════════════════════════════════════════════════════════ */

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-hover: #f1f5f9;
  --sidebar-bg: #ffffff;
  --sidebar-text: #1e293b;
  --sidebar-hover: #f1f5f9;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-soft: #f1f5f9;
  --accent: #475569;
  --accent-strong: #334155;
  --accent-2: #64748b;
  --accent-soft: #e2e8f0;
  --accent-on: #ffffff;
  --success: #15803d;
  --warn: #b45309;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.12);
}

body { transition: background 0.2s, color 0.2s; }