:root {
  --content-title-color: var(--title-color, var(--heading));
  --content-subtitle-color: var(--subtitle-color, var(--ink-muted));
  --content-text-color: var(--text-color, var(--ink));
}

body {
  color: var(--text-color, var(--ink));
}

main > section {
  --content-title-color: var(--title-color, var(--heading));
  --content-subtitle-color: var(--subtitle-color, var(--ink-muted));
  --content-text-color: var(--text-color, var(--ink));
  color: var(--content-text-color);
}

main > section[style*="background: var(--bg-section)"] {
  --content-title-color: var(--section-title-color, var(--title-color, var(--heading)));
  --content-subtitle-color: var(--section-subtitle-color, var(--subtitle-color, var(--ink-muted)));
  --content-text-color: var(--section-text-color, var(--text-color, var(--ink)));
}

main > section .section-head h1,
main > section .section-head h2,
main > section .section-head h2 em,
main > section .reviews__head h2,
main > section .about__title,
main > section .reserve-copy__title,
main > section.hero--cms .hero__title,
.menu-hero h1,
.event-hero h1,
.gallery-page-heading h1,
.legal-hero h1 {
  color: var(--content-title-color, var(--title-color, var(--heading))) !important;
}

main > section .eyebrow,
main > section .about__title em,
main > section .reserve-copy__title em,
main > section.hero--cms .hero__title em,
.menu-hero .eyebrow,
.event-hero .eyebrow,
.gallery-page-hero .eyebrow,
.legal-hero .eyebrow {
  color: var(--content-subtitle-color, var(--subtitle-color, var(--ink-muted))) !important;
}

main > section .lead,
main > section .section-head p,
main > section .section-copy,
main > section .event-lead,
main > section .about__copy,
main > section .about__copy p,
main > section.hero--cms .hero__tagline,
.menu-hero .section-copy,
.event-hero .event-lead,
.gallery-page-hero .section-copy,
.legal-hero .section-copy {
  color: var(--content-text-color, var(--text-color, var(--ink))) !important;
}

.menu-hero,
.event-hero,
.gallery-page-hero,
.legal-hero {
  --content-title-color: var(--section-title-color, var(--title-color, var(--heading)));
  --content-subtitle-color: var(--section-subtitle-color, var(--subtitle-color, var(--ink-muted)));
  --content-text-color: var(--section-text-color, var(--text-color, var(--ink)));
  color: var(--content-text-color);
}

.site-footer,
.footer {
  --content-title-color: var(--section-title-color, var(--title-color, var(--heading)));
  --content-subtitle-color: var(--section-subtitle-color, var(--subtitle-color, var(--ink-muted)));
  --content-text-color: var(--section-text-color, var(--text-color, var(--ink)));
  background: var(--footer-background, var(--bg-section)) !important;
  color: var(--content-text-color);
}

.site-footer h4,
.footer h4 {
  color: var(--content-title-color) !important;
}

.site-footer p,
.site-footer a,
.footer p,
.footer a {
  color: var(--content-text-color) !important;
}
