:root {
  --color-forest: #10251b;
  --color-forest-deep: #081410;
  --color-forest-soft: #1d3b2b;
  --color-earth: #6b5845;
  --color-earth-soft: #8a7460;
  --color-sand: #e5d8c5;
  --color-sand-deep: #cebda3;
  --color-offwhite: #f5f3ee;
  --color-charcoal: #171a18;
  --color-accent: #c47a32;
  --color-accent-soft: #d99a54;
  --color-accent-ink: #9a5a1e;
  --color-white: #ffffff;
  --color-line: rgba(16, 37, 27, 0.14);
  --color-line-dark: rgba(245, 243, 238, 0.16);

  --color-bg: var(--color-offwhite);
  --color-surface: #ffffff;
  --color-surface-alt: #ece7dc;
  --color-text: var(--color-charcoal);
  --color-text-muted: #4d554f;
  --color-text-invert: var(--color-offwhite);
  --color-text-invert-muted: rgba(245, 243, 238, 0.72);

  --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  --fs-display: clamp(3.25rem, 13vw, 10.5rem);
  --fs-h1: clamp(2.125rem, 6.2vw, 4rem);
  --fs-h2: clamp(1.75rem, 4.4vw, 3rem);
  --fs-h3: clamp(1.25rem, 2.4vw, 1.75rem);
  --fs-h4: clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body: clamp(1rem, 1.05vw, 1.0625rem);
  --fs-body-lg: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-button: 0.8125rem;

  --lh-tight: 0.92;
  --lh-heading: 1.08;
  --lh-snug: 1.35;
  --lh-body: 1.7;

  --ls-display: 0.01em;
  --ls-heading: -0.02em;
  --ls-eyebrow: 0.24em;
  --ls-button: 0.14em;

  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 0.875rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-section: clamp(3.5rem, 9vw, 7.5rem);
  --space-block: clamp(1.75rem, 4vw, 3rem);

  --container: 1280px;
  --container-wide: 1480px;
  --container-narrow: 820px;
  --gutter: clamp(1.125rem, 5vw, 3rem);

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 37, 27, 0.08);
  --shadow-md: 0 10px 30px -12px rgba(16, 37, 27, 0.28);
  --shadow-lg: 0 30px 60px -30px rgba(16, 37, 27, 0.45);

  --duration-fast: 160ms;
  --duration: 280ms;
  --duration-slow: 520ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 1000;
  --z-menu: 1100;
  --z-overlay: 1050;
  --z-modal: 1200;
  --z-top: 1300;

  --header-height: 68px;
}

@media (min-width: 1024px) {
  :root {
    --header-height: 84px;
  }
}