:root {
  /* ═══ Core Colors ═══ */
  --bg-primary: #030812;
  --bg-secondary: #060e1e;
  --bg-tertiary: #0a1628;
  --bg-card: rgba(8, 18, 38, 0.75);
  --bg-card-hover: rgba(12, 24, 50, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.03);
  --bg-glass-hover: rgba(255, 255, 255, 0.06);

  /* ═══ Accent Colors ═══ */
  --cyan: #00a8ff;
  --cyan-dim: rgba(0, 168, 255, 0.15);
  --cyan-glow: rgba(0, 168, 255, 0.4);
  --purple: #4d8dff;
  --purple-dim: rgba(77, 141, 255, 0.15);
  --purple-glow: rgba(77, 141, 255, 0.4);
  --pink: #0066cc;
  --pink-dim: rgba(0, 102, 204, 0.15);
  --green: #22c55e;
  --green-dim: rgba(34, 197, 94, 0.15);
  --amber: #f59e0b;
  --amber-dim: rgba(245, 158, 11, 0.15);
  --red: #ef4444;
  --red-dim: rgba(239, 68, 68, 0.15);

  /* ═══ Text Colors ═══ */
  --text-primary: #f0f0ff;
  --text-secondary: rgba(240, 240, 255, 0.65);
  --text-muted: rgba(240, 240, 255, 0.35);
  --text-accent: var(--cyan);

  /* ═══ Gradients ═══ */
  --gradient-hero: linear-gradient(135deg, #00c6ff, #0072ff, #004aad);
  --gradient-button: linear-gradient(135deg, #00a8ff, #0066cc);
  --gradient-card: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(139, 92, 246, 0.08));
  --gradient-glow: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.12), transparent 70%);
  --gradient-section: linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.02), transparent);

  /* ═══ Borders ═══ */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(0, 168, 255, 0.25);
  --border-glow: rgba(0, 168, 255, 0.5);

  /* ═══ Typography ═══ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ═══ Sizing ═══ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ═══ Shadows ═══ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow-cyan: 0 0 20px rgba(0, 168, 255, 0.15), 0 0 60px rgba(0, 168, 255, 0.05);
  --shadow-glow-purple: 0 0 20px rgba(77, 141, 255, 0.15), 0 0 60px rgba(77, 141, 255, 0.05);
  --shadow-glow-button: 0 0 20px rgba(0, 168, 255, 0.3), 0 4px 16px rgba(0, 0, 0, 0.4);

  /* ═══ 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);

  /* ═══ Z-Index ═══ */
  --z-particles: 0;
  --z-content: 1;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* ═══ Spacing ═══ */
  --container-max: 1200px;
  --section-padding: 100px 0;
  --nav-height: 72px;
}