/* ════════════════════════════════════════════════════════════════════
   m14r - Jeu de tokens de base (réutilisable tel quel, sans JS).
   C'est un EXEMPLE prêt à l'emploi : copie/édite, ou laisse le moteur
   m14r.js générer et remplacer ce <style> à chaud (id="m14r-vars").
   Convention : --<groupe>-<nom>. Mode sombre via [data-theme="dark"].
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* Couleurs de marque */
  --color-brand:#7c3aed;
  --color-primary:var(--color-brand);
  --color-accent:#f43f5e;
  --color-success:#10b981;
  --color-warning:#f59e0b;
  --color-danger:#ef4444;

  /* Surfaces & texte (clair) */
  --color-bg:#f8fafc;
  --color-surface:#ffffff;
  --color-line:#e2e8f0;
  --color-text:#0f172a;
  --color-muted:#64748b;

  /* Dérivés (alias / fonctions) */
  --color-primary-soft:color-mix(in srgb, var(--color-primary) 12%, transparent);
  --color-primary-ring:color-mix(in srgb, var(--color-primary) 40%, transparent);

  /* Espacements (échelle 4px) */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px;
  --space-4:16px; --space-5:24px; --space-6:32px; --space-8:48px;

  /* Rayons */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;

  /* Typographie */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --text-sm:13px; --text-md:15px; --text-lg:18px; --text-xl:24px;
  --leading:1.55;

  /* Ombres */
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 6px 18px -8px rgba(0,0,0,.18);
  --shadow-lg:0 24px 60px -16px rgba(0,0,0,.30);

  /* Mouvement & profondeur */
  --duration-fast:.12s; --duration-base:.2s; --duration-slow:.4s;
  --ease:cubic-bezier(.22,1,.36,1);
  --z-dropdown:1000; --z-modal:1100; --z-toast:1200;
}

/* Mode sombre : seuls les tokens qui changent sont redéfinis. */
[data-theme="dark"]{
  --color-bg:#020617;
  --color-surface:#0f172a;
  --color-line:#1e293b;
  --color-text:#e2e8f0;
  --color-muted:#94a3b8;
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-lg:0 28px 80px -16px rgba(0,0,0,.7);
}