:root {
  /* ============================================================
     THEME SYSTEM — NexWare ERP
     4 built-in themes, all driven by CSS custom properties.
     Default: Enterprise Dark (professional ERP)
  ============================================================ */

  /* ── BRAND PALETTE (neutral grayscale for default) ── */
  --brand-50:  #fafafa;
  --brand-100: #f4f4f5;
  --brand-200: #e4e4e7;
  --brand-300: #d4d4d8;
  --brand-400: #a1a1aa;
  --brand-500: #ffffff;
  --brand-600: #e4e4e7;
  --brand-700: #d4d4d8;
  --brand-800: #a1a1aa;
  --brand-900: #27272a;

  /* ── SEMANTIC ACCENT COLORS (global, all themes) ── */
  --accent-cyan:    #06b6d4;
  --accent-emerald: #10b981;
  --accent-amber:   #f59e0b;
  --accent-rose:    #f43f5e;
  --accent-violet:  #8b5cf6;
  --accent-sky:     #0ea5e9;
  --accent-red:     #ef4444;

  /* ── BACKGROUNDS ── */
  --bg-base:       #09090b;
  --bg-surface:    #111113;
  --bg-elevated:   #18181b;
  --bg-card:       #1c1c1f;
  --bg-card-hover: #252528;
  --bg-input:      #111113;
  --bg-sidebar:    #09090b;
  --bg-topbar:     rgba(9,9,11,0.96);

  /* ── BORDERS ── */
  --border-subtle:  rgba(255,255,255,0.05);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);
  --border-brand:   rgba(255,255,255,0.35);

  /* ── TEXT ── */
  --text-primary:   #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted:     #71717a;
  --text-disabled:  #3f3f46;
  --text-brand:     #ffffff;
  --text-success:   #34d399;
  --text-warning:   #fbbf24;
  --text-danger:    #fb7185;
  --text-info:      #38bdf8;

  /* ── GRADIENTS ── */
  --gradient-brand:   linear-gradient(135deg, #ffffff 0%, #a1a1aa 50%, #d4d4d8 100%);
  --gradient-card:    linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-sidebar: linear-gradient(180deg, #09090b 0%, #111113 100%);
  --gradient-hero:    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 60%),
                      radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 50%);

  /* ── SHADOWS ── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.6);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.7);
  --shadow-xl:    0 16px 40px rgba(0,0,0,0.8);
  --shadow-brand: 0 4px 16px rgba(255,255,255,0.04);
  --shadow-glow:  0 0 20px rgba(255,255,255,0.06);

  /* ── GLASSMORPHISM ── */
  --glass-bg:     rgba(255,255,255,0.02);
  --glass-border: rgba(255,255,255,0.05);
  --glass-blur:   blur(8px);
}

/* ============================================================
   THEME: ENTERPRISE LIGHT
   Clean, bright, professional — ideal for print/daylight.
============================================================ */
:root.theme-light {
  --brand-50:  #f8fafc;
  --brand-100: #f1f5f9;
  --brand-200: #e2e8f0;
  --brand-300: #cbd5e1;
  --brand-400: #94a3b8;
  --brand-500: #0f172a;
  --brand-600: #1e293b;
  --brand-700: #334155;
  --brand-800: #475569;
  --brand-900: #64748b;

  --bg-base:       #f8fafc;
  --bg-surface:    #f1f5f9;
  --bg-elevated:   #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-input:      #f1f5f9;
  --bg-sidebar:    #0f172a;
  --bg-topbar:     rgba(248,250,252,0.97);

  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.18);
  --border-brand:   rgba(15,23,42,0.35);

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-disabled:  #cbd5e1;
  --text-brand:     #0f172a;
  --text-success:   #059669;
  --text-warning:   #d97706;
  --text-danger:    #dc2626;
  --text-info:      #0284c7;

  --gradient-brand:   linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  --gradient-card:    linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.01) 100%);
  --gradient-sidebar: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  --gradient-hero:    radial-gradient(ellipse at 20% 50%, rgba(15,23,42,0.06) 0%, transparent 60%);

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:    0 16px 40px rgba(0,0,0,0.15);
  --shadow-brand: 0 4px 16px rgba(15,23,42,0.12);
  --shadow-glow:  0 0 20px rgba(15,23,42,0.08);

  --glass-bg:     rgba(0,0,0,0.02);
  --glass-border: rgba(0,0,0,0.06);
  --glass-blur:   blur(8px);
}

/* ============================================================
   THEME: CLASSIC SPACE NEON
   Indigo/violet gradient — original brand feel.
============================================================ */
:root.theme-classic {
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  --bg-base:       #0a0b1a;
  --bg-surface:    #0f1029;
  --bg-elevated:   #151730;
  --bg-card:       #1a1d3a;
  --bg-card-hover: #1f2347;
  --bg-input:      #12142b;
  --bg-sidebar:    #0c0e22;
  --bg-topbar:     rgba(10,11,26,0.96);

  --border-subtle:  rgba(255,255,255,0.05);
  --border-default: rgba(255,255,255,0.09);
  --border-strong:  rgba(255,255,255,0.16);
  --border-brand:   rgba(99,102,241,0.5);

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-disabled:  #334155;
  --text-brand:     #818cf8;

  --gradient-brand:   linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
  --gradient-card:    linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.04) 100%);
  --gradient-sidebar: linear-gradient(180deg, #0c0e22 0%, #08091f 100%);
  --gradient-hero:    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.28) 0%, transparent 60%),
                      radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.18) 0%, transparent 50%),
                      radial-gradient(ellipse at 60% 80%, rgba(6,182,212,0.12) 0%, transparent 50%);

  --shadow-sm:    0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:    0 16px 40px rgba(0,0,0,0.6);
  --shadow-brand: 0 4px 16px rgba(99,102,241,0.22);
  --shadow-glow:  0 0 20px rgba(99,102,241,0.28);

  --glass-bg:     rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.07);
  --glass-blur:   blur(8px);
}

/* ============================================================
   DESIGN SYSTEM — UNIVERSAL TOKENS (all themes)
============================================================ */
:root {
  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --sidebar-width:     260px;
  --sidebar-collapsed: 68px;
  --topbar-height:     64px;

  /* Z-Index layers */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ============================================================
   THEME: ENTERPRISE SLATE DARK
   Slate-blue premium dark theme.
   ============================================================ */
:root.theme-dark {
  --brand-50:  #f8fafc;
  --brand-100: #f1f5f9;
  --brand-200: #e2e8f0;
  --brand-300: #cbd5e1;
  --brand-400: #94a3b8;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;

  --bg-base:       #0b0f19;
  --bg-surface:    #111827;
  --bg-elevated:   #1f2937;
  --bg-card:       #1e293b;
  --bg-card-hover: #334155;
  --bg-input:      #0f172a;
  --bg-sidebar:    #0f172a;
  --bg-topbar:     rgba(11,15,25,0.96);

  --border-subtle:  rgba(255,255,255,0.05);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);
  --border-brand:   rgba(59,130,246,0.35);

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-disabled:  #475569;
  --text-brand:     #60a5fa;

  --gradient-brand:   linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --gradient-card:    linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(59,130,246,0.01) 100%);
  --gradient-sidebar: linear-gradient(180deg, #0f172a 0%, #0b0f19 100%);
  --gradient-hero:    radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.1) 0%, transparent 60%);

  --shadow-sm:    0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.6);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.7);
  --shadow-xl:    0 16px 40px rgba(0,0,0,0.8);
  --shadow-brand: 0 4px 16px rgba(59,130,246,0.15);
  --shadow-glow:  0 0 20px rgba(59,130,246,0.10);

  --glass-bg:     rgba(255,255,255,0.02);
  --glass-border: rgba(255,255,255,0.05);
  --glass-blur:   blur(8px);
}