:root {
  /* Colors */
  --color-bg: #0D1B2A;
  --color-surface: #1B2B3E;
  --color-accent: #10B981;
  --color-accent-dark: #059669;
  --color-text: #E8F4FF;
  --color-text-muted: #8BA8C4;
  --color-on-accent: #0D1B2A;
  --color-border: rgba(139, 168, 196, 0.12);
  --color-accent-glow: rgba(16, 185, 129, 0.28);
  --color-accent-subtle: rgba(16, 185, 129, 0.4);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --text-display: clamp(2.5rem, 6vw, 4.5rem);
  --text-h2: clamp(1.75rem, 4vw, 3rem);
  --text-body: 1.125rem;
  --text-small: 0.875rem;

  --leading-display: 1.05;
  --leading-h2: 1.1;
  --leading-body: 1.7;

  /* Spacing */
  --space-1: 8px;
  --space-1-5: 12px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-15: 120px;

  /* Layout */
  --max-width: 1200px;
  --prose-width: 680px;
  --nav-height: 72px;
  --section-pad: 120px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* Radius */
  --radius-base: 6px;
  --radius-pill: 100px;
}

@media (max-width: 768px) {
  :root {
    --section-pad: 80px;
    --text-body: 1.0625rem;
  }
}