@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-heading: 'Playfair Display', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-ui: 'Montserrat', system-ui, sans-serif;
  --heading-weight: 700;
  --body-weight: 700;
  --ui-weight: 400;
  --heading-tracking: 0;
  --heading-transform: none;
  --body-tracking: 0;
  --body-line-height: 1.5;
  --text-base: 16px;
  --h1-size: 48px;
  --h2-size: 36px;
  --h3-size: 28px;
  --h4-size: 22px;
  --color-h1: 0 0% 87%;
  --color-h2: 0 0% 10%;
  --color-h3: 0 0% 10%;
  --color-h4: 0 0% 10%;
  --color-body: 217 19% 27%;
  --color-body-muted: 220 9% 46%;
  --color-link: 37 67% 50%;
  --color-link-hover: 36 72% 42%;
  --hero-font: var(--font-heading);
  --hero-weight: 700;
  --hero-size: var(--h1-size);
  --hero-line-height: 1.1;
  --hero-tracking: 0;
  --hero-color: #FFFFFF;
  --hero-transform: none;
  --hero-subtitle-size: 18px;
  --hero-subtitle-color: #E5E7EB;
  --hero-cta-color: #D4942A;
}

body {
  font-family: var(--font-body) !important;
  font-weight: var(--body-weight) !important;
  letter-spacing: var(--body-tracking) !important;
  line-height: var(--body-line-height) !important;
  font-size: var(--text-base) !important;
}

p {
  color: hsl(var(--color-body));
}

a {
  color: hsl(var(--color-link));
}

a:hover {
  color: hsl(var(--color-link-hover));
}

h1 {
  font-family: var(--font-heading) !important;
  font-weight: var(--heading-weight) !important;
  letter-spacing: var(--heading-tracking) !important;
  text-transform: var(--heading-transform) !important;
  color: hsl(var(--color-h1));
}

h2 {
  font-family: var(--font-heading) !important;
  font-weight: var(--heading-weight) !important;
  letter-spacing: var(--heading-tracking) !important;
  text-transform: var(--heading-transform) !important;
  color: hsl(var(--color-h2));
}

h3 {
  font-family: var(--font-heading) !important;
  font-weight: var(--heading-weight) !important;
  letter-spacing: var(--heading-tracking) !important;
  text-transform: var(--heading-transform) !important;
  color: hsl(var(--color-h3));
}

h4, h5, h6 {
  font-family: var(--font-heading) !important;
  font-weight: var(--heading-weight) !important;
  letter-spacing: var(--heading-tracking) !important;
  text-transform: var(--heading-transform) !important;
  color: hsl(var(--color-h4));
}

.font-heading {
  font-family: var(--font-heading) !important;
  font-weight: var(--heading-weight) !important;
}

button, input, select, label, .font-ui {
  font-family: var(--font-ui);
  font-weight: var(--ui-weight);
}

h2.hero-title, .hero-title {
  font-family: var(--hero-font) !important;
  font-weight: var(--hero-weight) !important;
  font-size: var(--hero-size) !important;
  line-height: var(--hero-line-height) !important;
  letter-spacing: var(--hero-tracking) !important;
  text-transform: var(--hero-transform) !important;
  color: var(--hero-color) !important;
}

.hero-subtitle {
  font-size: var(--hero-subtitle-size) !important;
  color: var(--hero-subtitle-color) !important;
}

.hero-cta {
  color: var(--hero-cta-color) !important;
  border-color: var(--hero-cta-color) !important;
}

.hero-cta:hover {
  opacity: 0.85;
}