:root {
  /* Color System — VORTEX Brand Design System v1.0 */
  --color-primary: #2563eb;
  --color-secondary: #06b6d4;
  --color-accent: #7c3aed;
  --color-dark: #0b1120;
  --color-surface: #121a2d;
  --color-card: #172036;
  --color-light: #f8fafc;
  --color-white: #ffffff;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-muted: #94a3b8;
  --color-border: rgba(148, 163, 184, 0.15);
  --color-border-light: rgba(37, 99, 235, 0.25);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gradient-hero: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #06b6d4 100%);
  --gradient-cta: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 45%, #0891b2 100%);
  --gradient-text: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --gradient-glow: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.35) 0%, transparent 70%);

  /* Typography */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing — 8pt grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 120px;
  --space-12: 140px;
  --space-13: 160px;

  /* Layout */
  --container-width: 90vw;
  --nav-height: 80px;
  --nav-height-scrolled: 68px;
  --nav-scroll-range: 120px;
  --nav-blur-min: 0px;
  --section-padding: 100px;
  --section-padding-compact: 72px;

  /* Border Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.25);
  --shadow-card-hover: 0 20px 60px rgba(37, 99, 235, 0.15);

  /* Blur */
  --blur-nav: 16px;
  --blur-glass: 20px;

  /* Animation */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-hover: 220ms;
  --duration-nav: 420ms;
  --duration-reveal: 600ms;
  --duration-float: 8s;

  /* Z-index */
  --z-bg: 0;
  --z-content: 1;
  --z-decor: 2;
  --z-nav: 100;
  --z-modal: 200;

  /* Depth layers */
  --z-depth-bg: 0;
  --z-depth-glow: 1;
  --z-depth-pattern: 2;
  --z-depth-illustration: 3;
  --z-depth-particles: 4;
  --z-depth-cards: 5;
  --z-depth-content: 6;
}