:root {
  --color-ink: #F4F5F8;
  --color-paper: #0A0A0F;
  --color-mist: #17181F;
  --color-slate: #9599A8;
  --color-accent: #3D7FFF;
  --color-accent-dim: #2456C9;
  --color-accent-soft: #6EA2FF;
  /* darker than accent-soft on purpose: keeps white button text at >=4.5:1 (WCAG AA)
     across the whole gradient, where accent-soft itself only gives ~2.5:1 */
  --color-accent-btn-start: #3568D9;

  --color-bg: var(--color-paper);
  --color-text: var(--color-ink);
  --color-border: rgba(244, 245, 248, 0.1);

  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --container-max: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --gutter-sm: clamp(1rem, 2vw, 1.5rem);

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --step-3: clamp(2.5rem, 1.8rem + 3vw, 3.5rem);
  --step-4: clamp(2.75rem, 1.9rem + 4.5vw, 5.5rem);
  --step-5: clamp(2.5rem, 1.5rem + 6.5vw, 7rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.3s;
  --duration-base: 0.6s;
  --duration-slow: 1s;

  --nav-height: 88px;
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}