/* ==========================================================================
   Dark Premium SaaS — Design System Tokens
   Sophisticated, modern, clean executive financial & analytics UI
   ========================================================================== */

:root {
  /* Electric Blue Core */
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-400: #60A5FA;
  --blue-50:  #EFF6FF;
  --blue-glow: rgba(37, 99, 235, 0.18);
  --blue-subtle: rgba(37, 99, 235, 0.10);

  /* Functional Accents */
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --green-bg: rgba(16, 185, 129, 0.10);
  --green-border: rgba(16, 185, 129, 0.20);
  --green-500: #10B981;

  --rose-500: #F43F5E;
  --rose-600: #E11D48;
  --red-bg: rgba(244, 63, 94, 0.10);
  --red-border: rgba(244, 63, 94, 0.20);
  --red-500: #F43F5E;

  --amber-500: #F59E0B;
  --amber-bg: rgba(245, 158, 11, 0.10);
  --amber-border: rgba(245, 158, 11, 0.20);

  --indigo-500: #6366F1;
  --indigo-bg: rgba(99, 102, 241, 0.10);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Geometry & Animation */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Dark Premium SaaS Theme (Default) ──────────────────────────────────── */
[data-theme="dark"] {
  --bg-app: #171E31;
  --bg-sidebar: #303A52;
  --bg-header: #303A52;
  --bg-card: #283046;
  --bg-card-glass: rgba(40, 48, 70, 0.95);
  --bg-card-hover: #303A52;
  --bg-surface: #303A52;
  --bg-surface-light: #374158;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-input: #1b2337;

  --border-subtle: #374158;
  --border-focus: #0457D5;
  --border-card: #374158;

  --text-primary: #C7C9CF;
  --text-secondary: #9298A5;
  --text-muted: #787F91;
  --text-accent: #337BF0;

  --blue-500: #0457D5;
  --blue-600: #0457D5;
  --blue-700: #0346AB;
  --blue-400: #337BF0;
  --blue-glow: rgba(4, 87, 213, 0.25);
  --blue-subtle: rgba(4, 87, 213, 0.15);

  --accent-primary: #0457D5;
  --accent-hover: #0346AB;
  --accent-glow: rgba(4, 87, 213, 0.25);

  --purple-500: #6366F1;
  --purple-600: #4F46E5;
  --violet-400: #818CF8;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* ─── Light Premium SaaS Theme ───────────────────────────────────────────── */
[data-theme="light"] {
  --bg-app: #F8FAFC;
  --bg-sidebar: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-glass: rgba(255, 255, 255, 0.9);
  --bg-card-hover: #F1F5F9;
  --bg-surface: #F1F5F9;
  --bg-surface-light: #E2E8F0;
  --bg-input: #FFFFFF;

  --border-subtle: #E2E8F0;
  --border-focus: #2563EB;
  --border-card: #E2E8F0;

  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --text-accent: #2563EB;

  --accent-primary: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-glow: rgba(37, 99, 235, 0.15);

  --purple-500: #6366F1;
  --purple-600: #4F46E5;
  --violet-400: #6366F1;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 28px rgba(15, 23, 42, 0.08);
  --shadow-glass: 0 8px 24px rgba(15, 23, 42, 0.05);
}