:root {
  --eco-forest: #2f4739;
  --eco-forest-dark: #24392e;
  --eco-leaf: #65786a;
  --eco-forest-rgb: 47, 71, 57;
  --eco-paper: #fbf8f1;
  --eco-beige: #f4f0e6;
  --eco-kraft: #8a6747;
  --eco-ink: #252925;
  --eco-muted: #687069;
  --eco-border: #dadfd8;
  --eco-white: #ffffff;
  --eco-sale: #b5453a;
  --eco-success: #2f4739;

  --font-heading: "Cardo", Georgia, serif;
  --font-body: "Nunito Sans", Arial, sans-serif;
  --eco-font-heading: var(--font-heading);
  --eco-font-body: var(--font-body);

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 30px;
  --text-2xl: 40px;
  --text-3xl: 56px;
  --text-hero: clamp(42px, 5.4vw, 76px);

  --eco-space-1: 4px;
  --eco-space-2: 8px;
  --eco-space-3: 12px;
  --eco-space-4: 16px;
  --eco-space-5: 20px;
  --eco-space-6: 24px;
  --eco-space-8: 32px;
  --eco-space-10: 40px;
  --eco-space-12: 48px;
  --eco-space-16: 64px;
  --eco-space-20: 80px;

  --eco-radius-sm: 8px;
  --eco-radius-md: 12px;
  --eco-radius-lg: 16px;
  --eco-shadow-sm: 0 8px 24px rgba(47, 71, 57, 0.08);
  --eco-shadow-md: 0 18px 44px rgba(47, 71, 57, 0.14);
  --eco-container: 1600px;
  --eco-gutter: 24px;
  --eco-transition: 200ms ease;

  /* Map the local Shopify mirror onto the Ecosphere system. */
  --font-body-family: var(--eco-font-body);
  --font-heading-family: var(--eco-font-heading);
  --page-width: 160rem;
  --color-foreground: 37, 41, 37;
  --color-background: 251, 248, 241;
  --color-button: 47, 71, 57;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 255, 255, 255;
  --color-secondary-button-text: 47, 71, 57;
  --color-link: 47, 71, 57;
  --color-shadow: 47, 71, 57;
}