:root {
  /* Core Color Palette - Deep Navy & Charcoal Theme */
  --bg-main: #090d16;
  --bg-sidebar: #0b101c;
  --bg-card: #121829;
  --bg-card-hover: #172138;
  --bg-card-glass: rgba(18, 24, 41, 0.82);
  --bg-panel: #0e1424;
  --bg-input: #151d33;
  --bg-input-focus: #1a2542;
  --bg-overlay: rgba(5, 8, 15, 0.75);

  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.13);
  --border-active: rgba(139, 92, 246, 0.45);
  --border-focus: #8b5cf6;

  /* Brand Accents - Modern Purple & Cyan */
  --primary: #8b5cf6;
  --primary-hover: #7c3aed;
  --primary-light: #a78bfa;
  --primary-dim: rgba(139, 92, 246, 0.14);
  --primary-glow: 0 0 24px rgba(139, 92, 246, 0.25);

  --accent-cyan: #06b6d4;
  --accent-cyan-dim: rgba(6, 182, 212, 0.14);
  --accent-blue: #3b82f6;
  --accent-blue-dim: rgba(59, 130, 246, 0.14);
  --accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  --accent-gradient-subtle: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);

  /* Functional Status Colors */
  --success: #10b981;
  --success-dim: rgba(16, 185, 129, 0.14);
  --warning: #f59e0b;
  --warning-dim: rgba(245, 158, 11, 0.14);
  --danger: #f43f5e;
  --danger-dim: rgba(244, 63, 94, 0.14);
  --info: #0284c7;
  --info-dim: rgba(2, 132, 199, 0.14);

  /* Typography Colors */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-dim: #475569;
  --text-inverse: #090d16;

  /* Typography Font Stacks */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

  /* Layout Sizes */
  --sidebar-width: 260px;
  --context-panel-width: 330px;
  --header-height: 70px;
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --border-radius-xl: 22px;
  --border-radius-full: 9999px;

  /* Shadows & Glows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.2);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-header: 50;
  --z-sidebar: 60;
  --z-drawer: 70;
  --z-modal: 100;
  --z-toast: 150;
}