:root {
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --heading-font: var(--font-heading);
  --font-primary: var(--font-body);
  --font-display: var(--font-heading);
  --font-code: var(--font-mono);
  --font-display-weight: 500;
  --body-font-size: 1rem;
  --body-line-height: 1.6;
  --body-font-weight: 400;
  --h1-size: clamp(2.2rem, 4vw, 3.2rem);
  --h2-size: clamp(1.7rem, 3vw, 2.4rem);
  --h3-size: 1.3rem;
  --h4-size: 1.1rem;
  --h5-size: 1rem;
  --h6-size: 0.95rem;
  --heading-color: #1a1a1a;
  --body-color: var(--text-color, #545454);
}

body {
  font-family: var(--font-body) !important;
  font-size: var(--body-font-size) !important;
  line-height: var(--body-line-height) !important;
  font-weight: var(--body-font-weight) !important;
  color: var(--body-color) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font) !important;
  font-weight: var(--font-display-weight, 500) !important;
  color: var(--heading-color) !important;
  line-height: 1.2 !important;
}

h1 { font-size: var(--h1-size) !important; }
h2 { font-size: var(--h2-size) !important; }
h3 { font-size: var(--h3-size) !important; }
h4 { font-size: var(--h4-size) !important; }
h5 { font-size: var(--h5-size) !important; }
h6 { font-size: var(--h6-size) !important; }

p,
li,
td,
th,
label,
input,
textarea,
select,
button {
  font-family: var(--font-body) !important;
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono) !important;
}

/* Keep hero content readable on dark hero backgrounds */
#hero h1,
#hero h2,
#hero h3,
#hero h4,
#hero h5,
#hero h6,
[id$="-hero"] h1,
[id$="-hero"] h2,
[id$="-hero"] h3,
[id$="-hero"] h4,
[id$="-hero"] h5,
[id$="-hero"] h6,
[class$="-hero"] h1,
[class$="-hero"] h2,
[class$="-hero"] h3,
[class$="-hero"] h4,
[class$="-hero"] h5,
[class$="-hero"] h6,
[class*="-hero "] h1,
[class*="-hero "] h2,
[class*="-hero "] h3,
[class*="-hero "] h4,
[class*="-hero "] h5,
[class*="-hero "] h6,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content h4,
.hero-content h5,
.hero-content h6,
.hero__content h1,
.hero__content h2,
.hero__content h3,
.hero__content h4,
.hero__content h5,
.hero__content h6,
.hero-landing h1,
.hero-landing h2,
.hero-landing h3,
.hero-landing h4,
.hero-landing h5,
.hero-landing h6 {
  color: #fff !important;
}

#hero p,
[id$="-hero"] p,
[class$="-hero"] p,
[class*="-hero "] p,
.hero p,
.hero-content p,
.hero__content p,
.hero-landing p {
  color: rgba(255, 255, 255, 0.9) !important;
}