/* Variables — couleurs, espacements, ombres (design system) */

/* ============================================================
   DECANTIQ — DESIGN SYSTEM v2
   Premium SaaS Dashboard
   ============================================================ */

:root {
  /* ── Brand ─────────────────────────────────────── */
  --brand:        #5b21b6;
  --brand-dark:   #4c1d95;
  --brand-light:  #7c3aed;
  --brand-dim:    #ede9fe;
  --brand-mid:    #c4b5fd;
  --brand-rgb:    91, 33, 182;
  --brand-droplet-scale: 0.72;

  /* ── Layout ─────────────────────────────────────── */
  --topbar-h:     52px;
  --sidebar-w:    224px;

  /* ── Surfaces ───────────────────────────────────── */
  --bg:           #f8fafc;
  --surface:      #ffffff;
  --surface-sub:  #f1f5f9;
  --surface-dim:  #e2e8f0;

  /* ── Sidebar (dark) ─────────────────────────────── */
  --sb-bg:        #0d1117;
  --sb-border:    rgba(255,255,255,0.07);
  --sb-text:      #8b949e;
  --sb-text-h:    #e6edf3;
  --sb-active-bg: rgba(var(--brand-rgb), 0.18);
  --sb-active:    var(--brand-light);

  /* ── Text ───────────────────────────────────────── */
  --text:         #0f172a;
  --text-2:       #475569;
  --text-3:       #94a3b8;

  /* ── Borders ────────────────────────────────────── */
  --border:       #e2e8f0;
  --border-s:     #cbd5e1;

  /* ── Status ─────────────────────────────────────── */
  --ok:           #059669;
  --ok-bg:        #ecfdf5;
  --ok-b:         #a7f3d0;

  --info:         #2563eb;
  --info-bg:      #eff6ff;
  --info-b:       #bfdbfe;

  --warning:      #c2410c;
  --warning-bg:   #fff7ed;
  --warning-b:    #fdba74;

  --critical:     #dc2626;
  --critical-bg:  #fef2f2;
  --critical-b:   #fecaca;

  /* ── Shadows ────────────────────────────────────── */
  --sh-xs: 0 1px 2px rgba(0,0,0,.05);
  --sh-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --sh-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04);
  --sh-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03);

  /* ── Radii ──────────────────────────────────────── */
  --r-xs:   3px;
  --r-sm:   6px;
  --r:      8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* ── Legacy aliases (utilisés dans les templates) ── */
  --primary:           #0f172a;
  --primary-container: #1e293b;
  --border-strong:     var(--border-s);
  --text-muted:        var(--text-3);
}

/* ── Mode sombre ──────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:           #0d1117;
  --surface:      #161b22;
  --surface-sub:  #1c2128;
  --surface-dim:  #21262d;

  --text:         #e6edf3;
  --text-2:       #8b949e;
  --text-3:       #6e7681;

  --border:       #30363d;
  --border-s:     #484f58;

  --ok-bg:        #0d1f17;
  --ok-b:         #065f46;

  --info-bg:      #0c1929;
  --info-b:       #1e3a5f;

  --warning-bg:   #1a1208;
  --warning-b:    #78350f;

  --critical-bg:  #1a0a0a;
  --critical-b:   #7f1d1d;

  --sh-xs: 0 1px 2px rgba(0,0,0,.25);
  --sh-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
  --sh-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -1px rgba(0,0,0,.25);
  --sh-lg: 0 10px 15px -3px rgba(0,0,0,.45), 0 4px 6px -2px rgba(0,0,0,.3);

  --primary:           #e6edf3;
  --primary-container: #21262d;
}