:root {
  --offwhite: #f6f1eb;
  --red: #9c0000;
  --blue: #a8d1e9;
  --brown: #2e180f;

  --black: #000000;
  --overlay: hsl(20, 53%, 7%, 0.35);

  --font-display: desire-pro, serif;
  --font-body: neue-haas-grotesk-display, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;

  --text-xxs: 0.75rem;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2rem;

  --text-h3: 2.5rem;
  --text-h2: 3rem;
  --text-h1: 4rem;
  --text-display: 4.5rem;

  --lh-body: 1.5;
  --lh-heading: 1.1;

  --sp-50: 0.5rem;
  --sp-75: 0.75rem;
  --sp-100: 1rem;
  --sp-150: 1.5rem;
  --sp-200: 2rem;
  --sp-250: 2.5rem;
  --sp-300: 3rem;
  --sp-350: 3.5rem;
  --sp-400: 4rem;
  --sp-500: 5rem;
  --sp-700: 7rem;
  --sp-800: 8rem;

  --container-max: 1440px;
  --container-padding-mob: 1rem;
  --container-padding: 2.5rem;

  --nav-spacing: clamp(var(--sp-100), 3vw, var(--sp-150));
  --header-height: calc(var(--nav-spacing) * 2 + 61px);

  --transition-base: 0.3s ease;

  --z-nav: 10;
  --z-overlay: 100;
  --z-modal: 1000;
}