/* =====================================================
   PARKCLEAN — DESIGN TOKENS (source unique de vérité)
   ===================================================== */

:root {
  /* ── Palette principale ── */
  --clr-bg:            #0d1623;
  --clr-surface:       #111c35;
  --clr-surface-1:     #131e38;
  --clr-surface-2:     #172038;
  --clr-surface-3:     #1e2a45;
  --clr-border:        rgba(255,255,255,0.07);
  --clr-border-strong: rgba(255,255,255,0.14);

  /* ── Accent bleu électrique ── */
  --clr-accent:        #3b82f6;
  --clr-accent-dark:   #2563eb;
  --clr-accent-light:  rgba(59,130,246,0.14);
  --clr-indigo:        #6366f1;
  --clr-indigo-light:  rgba(99,102,241,0.14);

  /* ── Navy (inspiré EIC Manager) ── */
  --clr-navy:          #1b3a6b;
  --clr-navy-dark:     #0f2040;
  --clr-navy-hover:    #152f57;
  --clr-navy-light:    rgba(27,58,107,0.14);
  --clr-navy-medium:   rgba(27,58,107,0.20);

  /* ── États ── */
  --clr-success:       #10b981;
  --clr-success-light: rgba(16,185,129,0.12);
  --clr-warning:       #f59e0b;
  --clr-warning-light: rgba(245,158,11,0.12);
  --clr-danger:        #ef4444;
  --clr-danger-light:  rgba(239,68,68,0.12);
  --clr-purple:        #8b5cf6;
  --clr-purple-light:  rgba(139,92,246,0.12);
  --clr-rose:          #f43f5e;
  --clr-rose-light:    rgba(244,63,94,0.12);
  --clr-amber:         #f59e0b;
  --clr-amber-light:   rgba(245,158,11,0.12);
  --clr-emerald:       #10b981;
  --clr-emerald-light: rgba(16,185,129,0.12);

  /* ── Texte ── */
  --clr-text:          #e8edf5;
  --clr-text-2:        #a8b8d0;
  --clr-muted:         #8a9bbe;
  --clr-faint:         #4a5a7a;

  /* ── Sidebar (navy gradient) ── */
  --sidebar-bg-from:   #1b3a6b;
  --sidebar-bg-mid:    #152f57;
  --sidebar-bg-to:     #0f2040;
  --sidebar-text:      rgba(255,255,255,0.70);
  --sidebar-text-dim:  rgba(255,255,255,0.38);
  --sidebar-border:    rgba(255,255,255,0.08);
  --sidebar-item-hover: rgba(255,255,255,0.06);
  --sidebar-item-active: rgba(59,130,246,0.18);

  /* ── Layout ── */
  --sidebar-w:         268px;
  --topbar-h:          60px;
  --content-max:       1400px;

  /* ── Radius ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ── Ombres ── */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:      0 10px 40px rgba(0,0,0,0.55);
  --shadow-xl:      0 20px 60px rgba(0,0,0,0.65);
  --shadow-card:    0 4px 24px rgba(0,0,0,0.35);
  --shadow-card-hov:0 12px 48px rgba(0,0,0,0.50);
  --shadow-sidebar: 4px 0 32px rgba(0,0,0,0.55);
  --glow-accent:    0 0 20px rgba(59,130,246,0.35);
  --glow-success:   0 0 20px rgba(16,185,129,0.3);

  /* ── Motion ── */
  --ease:        cubic-bezier(.25,.8,.25,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --ease-in:     cubic-bezier(.4,0,1,1);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    350ms;

  /* ── Typographie ── */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Monaco, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.3125rem;
  --text-2xl:  1.5625rem;
  --text-3xl:  1.9375rem;

  /* ── Z-index ── */
  --z-sidebar:  150;
  --z-topbar:   100;
  --z-modal:    200;
  --z-toast:    300;
  --z-loader:   400;
}

/* ── Light mode ── */
[data-theme="light"] {
  --clr-bg:            #f0f4f8;
  --clr-surface:       #ffffff;
  --clr-surface-1:     #fafcff;
  --clr-surface-2:     #f4f7fb;
  --clr-surface-3:     #edf2f7;
  --clr-border:        rgba(0,0,0,0.08);
  --clr-border-strong: rgba(0,0,0,0.15);
  --clr-text:          #1a2540;
  --clr-text-2:        #334155;
  --clr-muted:         #4a5a7a;
  --clr-faint:         #8a9bbe;
  --clr-accent-light:  rgba(59,130,246,0.10);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 10px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15);
  --shadow-card:     0 4px 24px rgba(27,58,107,0.10);
  --shadow-card-hov: 0 12px 40px rgba(27,58,107,0.18);
  --shadow-sidebar:  4px 0 32px rgba(0,0,0,0.12);
}