:root {
  --black: #0a0a0a;
  --mist: #e4e0e0;
  --off: #f0eded;
  --red: #e31b23;
  --grey: #5c5c5c;
  --white: #ffffff;
  --stone: #cfc9c9;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  --line: 2px;
  --radius: 2px;
  --print-pad: 10px;
  --print-shadow: 0 18px 40px rgb(0 0 0 / 0.38);

  --text-body: 1.0625rem;
  --display-hero: clamp(3.8rem, 17vw, 13.5rem);
  --display-section: clamp(2rem, 4.4vw, 3.6rem);
  --display-faq: clamp(3.2rem, 8vw, 5.4rem);

  --header-height: 4.25rem;
  --touch-min: 44px;
  --container: 90rem;
  --section-padding-x: clamp(1.15rem, 4vw, 3.5rem);
  --section-gap: clamp(1.35rem, 2.8vw, 2.35rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 0.75rem);
}

@media (min-width: 768px) {
  :root {
    --text-body: 1.125rem;
    --display-hero: clamp(6.2rem, 16vw, 13.5rem);
  }
}