:root {
  /* Colors */
  --color-bg:         #f3ece3;
  --color-brown-dark: #4f341b;
  --color-dark:       #4f341b;  /* alias used by hero CTA, hero title, products, etc. */
  --color-brown-alt:  #452910;
  --color-brown:      #6e5446;
  --color-tan:        #d1ba9e;
  --color-tan-light:  rgba(209, 186, 158, 0.7);
  --color-accent:     #a47c59;
  --color-accent-alt: #bb9572;
  --color-text-muted: rgba(243, 236, 227, 0.74);
  --color-white:      #f3ece3;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Montserrat', Arial, sans-serif;

  --fs-h1:   clamp(40px, 4.4vw, 64px);
  --fs-h2:   clamp(28px, 3vw, 40px);
  --fs-h3:   clamp(22px, 2vw, 32px);
  --fs-body: 18px;
  --fs-sm:   15px;
  --fs-xs:   12px;

  --lh-body: 31px;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  96px;
  --space-2xl: 128px;

  /* Layout */
  --container-max: 1212px;
  --container-pad: clamp(20px, 4vw, 114px);

  /* Radius */
  --radius-sm:  7px;
  --radius-md:  13px;
  --radius-lg:  19px;
  --radius-xl:  33px;

  /* Transitions */
  --transition: 0.25s ease;
}