:root {
  --font-base: 'Space Grotesk', sans-serif;
  --font-heading: 'Roboto', sans-serif;
  --font-button: 'Clash Display', sans-serif;

  --fs-base: clamp(16px, 1.0417vw, 20px);
  --fs-sm: 0.875rem;
  --fs-lg: 1.25rem;
  --fs-h1: clamp(2rem, 1.6rem + 1.8vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  --fs-h3: clamp(1.3rem, 1.2rem + 0.8vw, 1.8rem);

  --fw-h1: 500;
  --fw-h2: 500;
  --fw-h3: 500;
  --fw-h4: 500;
  --fw-h5: 500;
  --fw-h6: 500;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 28px;
  --space-xl: 40px;
  --space-2xl: 56px;
  --space-3xl: 84px;

  --container-max: 1520px;
  --space-page-fluid: clamp(24px, 10.4167vw, 200px);
  --color-dark: #21282b;
  --color-on-dark: #f5f5f3;
  --color-on-dark-rgb: 245, 245, 243;
  --color-focus: #e6c992;
  --header-height: clamp(84px, 6.0417vw, 116px);
  --header-logo-width: clamp(160px, 13.75vw, 264px);
  --header-gap: clamp(16px, 1.5625vw, 30px);
  --header-font-size: clamp(12px, 0.9375vw, 18px);
  --header-nav-gap: clamp(14px, 1.5625vw, 30px);
  --header-cta-py: clamp(10px, 0.78125vw, 15px);
  --header-cta-px: clamp(18px, 1.5625vw, 30px);
  --hero-title-size: clamp(28px, 2.5vw, 48px);
  --hero-title-spacing: 0.055em;
  --hero-description-size: clamp(14px, 0.9375vw, 18px);
  --hero-title-width: 24em;
  --hero-description-width: 61em;
  --hero-bottom-space: clamp(64px, 5.2083vw, 100px);
  --hero-content-gap: clamp(20px, 1.3021vw, 25px);
  --hero-button-font: clamp(14px, 1.0417vw, 20px);
  --hero-button-py: clamp(12px, 0.8333vw, 16px);
  --hero-button-px: clamp(22px, 1.5625vw, 30px);
  --radius-pill: 100vmax;
  --container-narrow: 1720px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --color-accent: #000000;
  --color-accent-rgb: 0, 0, 0;
  --color-on-accent: #ffffff;
  --color-text: #111111;
  --color-text-rgb: 17, 17, 17;
  --color-muted: #5f6672;
  --color-white: #ffffff;
  --color-surface: #f5f5f5;

  --btn-padding-y: 12px;
  --btn-padding-x: 24px;
  --btn-border-width: 1px;
  --btn-row-gap: var(--space-md);
  --gradient-btn-font-size: clamp(15px, 1.0417vw, 20px);
  --gradient-btn-padding-y: 12px;
  --gradient-btn-padding-x: 28px;
  --gradient-btn-min-height: 44px;
}