/* ============================================================
 * ESSIKNETWORK — Design Tokens (Phase 2/3 : Design System).
 * Source unique : couleurs, typo, radius, ombres, espacements.
 * Tous les widgets lisent ces variables (aucun hardcode de
 * couleur dans les nouveaux widgets). Dark mode : surcharge
 * via html[data-theme="dark"] (toggle Essik, localStorage).
 * Fichier chargé en premier (dépendances des autres CSS).
 * ============================================================ */

:root {
  /* ---------- Marque ---------- */
  --essik-primary: #FF5500;
  --essik-primary-hover: #E04B00;
  --essik-primary-soft: #FFF2EB;
  --essik-primary-glow: rgba(255, 85, 0, 0.14);
  --essik-dark: #0A0D12;
  --essik-dark-2: #151A23;

  /* ---------- Texte ---------- */
  --essik-text: #0F172A;
  --essik-text-strong: #0A0D12;
  --essik-muted: #64748B;
  --essik-faint: #94A3B8;

  /* ---------- Surfaces & bordures ---------- */
  --essik-bg: #FFFFFF;
  --essik-bg-muted: #F8FAFC;
  --essik-border: #E2E8F0;
  --essik-card-border: #E2E8F0;

  /* ---------- Statuts ---------- */
  --essik-success: #10D48A;
  --essik-success-bg: #ECFDF5;
  --essik-error: #EF4444;
  --essik-error-bg: #FEF2F2;

  /* ---------- Typo ---------- */
  --essik-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --essik-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Radius ---------- */
  --essik-radius-xl: 20px;
  --essik-radius: 16px;
  --essik-radius-md: 12px;
  --essik-radius-sm: 10px;
  --essik-radius-pill: 9999px;

  /* ---------- Ombres ---------- */
  --essik-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.18);
  --essik-shadow-btn: 0 8px 20px -6px rgba(255, 85, 0, 0.55);
  --essik-shadow-card: 0 4px 14px rgba(2, 6, 23, 0.06);

  /* ---------- Transitions ---------- */
  --essik-ease: cubic-bezier(.4, 0, .2, 1);
  --essik-speed: 0.18s;
}

/* ---------- Dark mode (toggle Essik) ---------- */
html[data-theme="dark"] {
  --essik-text: #E2E8F0;
  --essik-text-strong: #F8FAFC;
  --essik-muted: #94A3B8;
  --essik-faint: #64748B;
  --essik-bg: #12161F;
  --essik-bg-muted: #151A24;
  --essik-border: #1F2633;
  --essik-card-border: #1F2633;
  --essik-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
  --essik-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.4);
}