:root {
  --color-bg-cream: #F5F3EE;
  --color-bg-dark: #141412;
  --color-bg-dark-2: #0C0C0B;
  --color-text-primary: #3A3C35;
  --color-text-secondary: #74776F;
  --color-text-muted: #C5C3B7;
  --color-text-white: #FFFFFF;
  --color-text-light: #DBD9CF;
  --color-accent: #B58C38;
  --color-accent-hover: #C99C42;
  --color-border: #D5CFC0;
  --color-border-light: #C5C3B7;
  --color-border-dark: rgba(197, 195, 183, .4);
  --color-placeholder: #D8DAE0;
  --color-placeholder-alt: #C4C4C4;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fs-display: 64px;
  --fs-h1: 64px;
  --fs-h2: 44px;
  --fs-h3: 36px;
  --fs-h4: 32px;
  --fs-h5: 28px;
  --fs-h6: 24px;
  --fs-body: 16px;
  --fs-small: 16px;
  --lh-tight: 1.1;
  --lh-heading: 1.12;
  --lh-body: 1.5;
  --lh-body-loose: 1.6;
  --ls-wide: 1.2px;
  --ls-wider: 1.5px;
  --ls-widest: 1.6px;
  --ls-uppercase: 1.7px;
  --container-max-width: 1240px;
  --container-padding-x: 24px;
  --section-padding-y: 80px;
  --section-padding-top: 80px;
  --section-padding-bottom: 80px;
  --section-padding-x: 24px;
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: 20px;
  --gap-xl: 24px;
  --gap-2xl: 28px;
  --gap-3xl: 30px;
  --gap-4xl: 36px;
  --gap-5xl: 42px;
  --gap-6xl: 48px;
  --gap-7xl: 76px;
  --grid-gap: 24px;
  --grid-cols: 3;
  --btn-padding-y: 14px;
  --btn-padding-x: 24px;
  --btn-font-size: 16px;
  --btn-radius: 0;
  --btn-primary-bg: var(--color-accent);
  --btn-primary-bg-hover: var(--color-accent-hover);
  --btn-primary-text: var(--color-text-white);
  --transition-fast: .15s ease;
  --transition-base: .2s ease;
  --transition-slow: .3s ease;
  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;
}

@media (max-width: 768px) {
  :root {
    --fs-display: 40px;
    --fs-h1: 36px;
    --fs-h2: 36px;
    --fs-h3: 32px;
    --fs-h4: 28px;
    --fs-h5: 24px;
    --fs-h6: 24px;
    --section-padding-y: 40px;
    --section-padding-top: 40px;
    --section-padding-bottom: 40px;
    --section-padding-x: 16px;
    --container-padding-x: 16px;
    --grid-cols: 1;
    --grid-gap: 20px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --grid-cols: 2;
    --section-padding-y: 60px;
    --section-padding-top: 60px;
    --section-padding-bottom: 60px;
  }
}