/* ============================================================
   Testify — Variables globales (Smart WP Design System)
   ============================================================ */

:root {
  /* ---- Brand (accent unique configurable) ---------------- */
  --color-brand-primary: #6366f1;   /* indigo Testify */
  --color-brand-soft:    rgba(99, 102, 241, 0.10);
  --color-brand-border:  rgba(99, 102, 241, 0.20);

  /* ---- Surfaces (light) ---------------------------------- */
  --surface-primary:   #ffffff;
  --surface-secondary: #f8fafc;
  --surface-elevated:  rgba(255,255,255,0.70);
  --surface-overlay:   rgba(255,255,255,0.85);
  --surface-glass:     rgba(255,255,255,0.70);

  /* ---- Text (light) -------------------------------------- */
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-tertiary:  #94a3b8;
  --text-inverse:   #ffffff;

  /* ---- Borders (light) ----------------------------------- */
  --border-primary:   #e2e8f0;
  --border-secondary: #f1f5f9;
  --border-strong:    #cbd5e1;

  /* ---- Status colors (universels) ------------------------ */
  --color-success: #10b981;
  --color-info:    #3b82f6;
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;
  --color-success-soft: rgba(16,185,129,0.15);
  --color-info-soft:    rgba(59,130,246,0.15);
  --color-warning-soft: rgba(245,158,11,0.15);
  --color-danger-soft:  rgba(239,68,68,0.15);

  /* ---- Spacings (4 / 8 / 12 / 16 / 20 / 24 / 32) --------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Radius -------------------------------------------- */
  --radius-sm:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ---- Sidebar dimensions (FIXES) ------------------------ */
  --sidebar-w-expanded: 256px;
  --sidebar-w-collapsed: 80px;

  /* ---- Shadows ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* ---- Backgrounds (radial gradients) -------------------- */
  --bg-app: radial-gradient(circle at 50% 0%, #f5f3ff 0%, #ffffff 100%);

  /* ---- Typography ---------------------------------------- */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-title: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:  'JetBrains Mono', 'SFMono-Regular', monospace;

  /* ---- Transitions --------------------------------------- */
  --t-fast: 150ms ease-in-out;
  --t-base: 200ms ease-in-out;
  --t-slow: 300ms ease-in-out;

  /* ---- Z-index ------------------------------------------- */
  --z-sidebar: 20;
  --z-toggle: 30;
  --z-modal:  40;
  --z-toast:  50;
}

/* ============================================================
   Dark mode override (jamais de noir pur)
   ============================================================ */
[data-theme="dark"] {
  --surface-primary:   #0a0a0c;
  --surface-secondary: rgba(255,255,255,0.03);
  --surface-elevated:  rgba(255,255,255,0.04);
  --surface-overlay:   rgba(20,20,30,0.85);
  --surface-glass:     rgba(255,255,255,0.04);

  --text-primary:   #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary:  #64748b;
  --text-inverse:   #0f172a;

  --border-primary:   rgba(255,255,255,0.08);
  --border-secondary: rgba(255,255,255,0.04);
  --border-strong:    rgba(255,255,255,0.16);

  --color-brand-soft:   rgba(99, 102, 241, 0.18);
  --color-brand-border: rgba(99, 102, 241, 0.35);

  --bg-app: radial-gradient(circle at 50% -20%, #1e1b4b 0%, #0a0a0c 100%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.30);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.40);
}