:root {
  /* Colors */
  --color-bg: #0A0E1A;
  --color-bg-elevated: #0E1014;
  --color-bg-elevated-2: #15171F;
  --color-cyan: #00D4FF;
  --color-cyan-dim: rgba(0, 212, 255, 0.15);
  --color-coral: #FF6B5B;
  --color-coral-dim: rgba(255, 107, 91, 0.18);
  --color-text: #F5F5F7;
  --color-text-muted: #8E8E93;
  --color-text-subtle: #6B6B72;
  --color-border: #1F2230;
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-error: #F87171;
  --color-overlay: rgba(10, 14, 26, 0.85);

  /* Gradient */
  --gradient-primary: linear-gradient(135deg, #00D4FF 0%, #FF6B5B 100%);
  --gradient-text: linear-gradient(135deg, #00D4FF 0%, #FF6B5B 100%);

  /* Typography */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Type scale (mobile) */
  --text-display: clamp(48px, 9vw, 96px);
  --text-h1: clamp(36px, 6vw, 64px);
  --text-h2: clamp(28px, 4.5vw, 48px);
  --text-h3: clamp(22px, 3vw, 32px);
  --text-h4: clamp(18px, 2vw, 22px);
  --text-body-lg: clamp(17px, 1.4vw, 20px);
  --text-body: 16px;
  --text-small: 14px;
  --text-tiny: 12px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 1px 0 rgba(0, 212, 255, 0.3) inset, 0 40px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 212, 255, 0.4);
  --shadow-cyan-glow: 0 0 24px rgba(0, 212, 255, 0.4);
  --shadow-cyan-glow-strong: 0 12px 32px rgba(0, 212, 255, 0.35), 0 0 24px rgba(0, 212, 255, 0.4);

  /* Layout */
  --container-max: 1280px;
  --container-padding: clamp(20px, 4vw, 48px);
  --section-padding-y: clamp(64px, 10vw, 128px);

  /* Z-index */
  --z-nav: 100;
  --z-modal: 200;
  --z-overlay: 150;
}