:root {
  /* Color Palette (HEX values for base colors) */
  --color-bg: #050816;
  --color-surface: #0B1120;
  --color-primary: #00D4FF;
  --color-secondary: #7C3AED;
  --color-success: #00FF88;
  --color-warning: #F59E0B;
  --color-danger: #FF4D6D;
  --color-text: #F5F7FA;
  --color-muted: #94A3B8;

  /* RGB equivalents for transparency overlays and glassmorphism glows */
  --rgb-bg: 5, 8, 22;
  --rgb-surface: 11, 17, 32;
  --rgb-primary: 0, 212, 255;
  --rgb-secondary: 124, 58, 237;
  --rgb-success: 0, 255, 136;
  --rgb-warning: 245, 158, 11;
  --rgb-danger: 255, 77, 109;
  --rgb-text: 245, 247, 250;
  --rgb-muted: 148, 163, 184;

  /* Glassmorphism Styles */
  --glass-bg: rgba(11, 17, 32, 0.65);
  --glass-bg-hover: rgba(11, 17, 32, 0.8);
  --glass-border: rgba(0, 212, 255, 0.1);
  --glass-border-hover: rgba(0, 212, 255, 0.25);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  --glass-shadow-primary: 0 0 25px rgba(0, 212, 255, 0.15);
  --glass-backdrop-blur: blur(12px);

  /* Typography */
  --font-headings: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-terminal: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing Grid (Desktop priority, fluid for responsiveness) */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;

  /* Interactive Elements */
  --spotlight-size: 400px;
}

/* Unclassified / Light Mode Overrides */
[data-theme="unclassified"] {
  --color-bg: #F1F5F9;
  --color-surface: #FFFFFF;
  --color-text: #0F172A;
  --color-muted: #64748B;

  --rgb-bg: 241, 245, 249;
  --rgb-surface: 255, 255, 255;
  --rgb-text: 15, 23, 42;
  --rgb-muted: 100, 116, 139;

  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-bg-hover: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(0, 212, 255, 0.15);
  --glass-border-hover: rgba(0, 212, 255, 0.35);
  --glass-shadow: 0 8px 32px 0 rgba(148, 163, 184, 0.12);
  --glass-shadow-primary: 0 0 25px rgba(0, 212, 255, 0.08);
}

/* Base resets & layout variables */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}