:root {
  --color-cream: #f7f5f2;
  --color-cream-deep: #efece7;
  --color-stone: #ddd8d0;
  --color-charcoal: #161615;
  --color-ink: #1c1b19;
  --color-muted: #7a756e;
  --color-accent: #3d6f6a;

  --font-sans: "Instrument Sans", "Helvetica Neue", sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 2.8vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 5vw, 2.75rem);
  --text-hero: clamp(2.5rem, 9vw, 5.25rem);

  --nav-height: 3.25rem;
  --content-max: 72rem;
  --measure: 34rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 800ms;
  --duration-slow: 1400ms;
}

@media (min-width: 768px) {
  :root {
    --nav-height: 4rem;
  }
}