/* ==========================================================================
   Typography Design Tokens
   --------------------------------------------------------------------------
   Font loading moved to the WordPress / Divi theme (leader decision
   2026-04-22). Brand stacks (Ownersnarrow-bold headings + Questrial
   Regular body) are served globally and inherited via the cascade. The
   plugin no longer ships @font-face declarations — the previous Inter
   blocks were competing with the theme and have been removed.
   ========================================================================== */

:root {
  /* Font Family — mirrors scss/_tokens.scss $f4f-typography */
  --font-family-primary: "Questrial Regular", Helvetica, Arial, Lucida, sans-serif;
  --font-family-heading: "Ownersnarrow-bold", Helvetica, Arial, Lucida, sans-serif;

  /* Headings */
  --font-h1-size: 80px;
  --font-h1-weight: 700;
  --font-h1-line-height: 65px;
  --font-h1-letter-spacing: -4%;

  --font-h2-size: 50px;
  --font-h2-weight: 700;
  --font-h2-line-height: 58px;
  --font-h2-letter-spacing: 0%;

  --font-h3-size: 32px;
  --font-h3-weight: 700;
  --font-h3-line-height: 39px;
  --font-h3-letter-spacing: 0%;

  --font-h4-size: 24px;
  --font-h4-weight: 700;
  --font-h4-line-height: 29px;
  --font-h4-letter-spacing: 0%;

  /* Body Text */
  --font-body-18-semibold-size: 18px;
  --font-body-18-semibold-weight: 600;
  --font-body-18-semibold-line-height: 27px;
  --font-body-18-semibold-letter-spacing: -2%;

  --font-body-18-regular-size: 18px;
  --font-body-18-regular-weight: 400;
  --font-body-18-regular-line-height: 27px;
  --font-body-18-regular-letter-spacing: -2%;

  --font-body-16-regular-size: 16px;
  --font-body-16-regular-weight: 400;
  --font-body-16-regular-line-height: 22px;
  --font-body-16-regular-letter-spacing: 0%;

  --font-body-16-bold-size: 16px;
  --font-body-16-bold-weight: 700;
  --font-body-16-bold-line-height: 19px;
  --font-body-16-bold-letter-spacing: 0%;

  /* Small Text */
  --font-small-13-regular-size: 13px;
  --font-small-13-regular-weight: 400;
  --font-small-13-regular-line-height: 16px;
  --font-small-13-regular-letter-spacing: 0%;

  --font-small-13-medium-size: 13px;
  --font-small-13-medium-weight: 500;
  --font-small-13-medium-line-height: 16px;
  --font-small-13-medium-letter-spacing: 0%;

  --font-small-11-regular-size: 11px;
  --font-small-11-regular-weight: 400;
  --font-small-11-regular-line-height: 13px;
  --font-small-11-regular-letter-spacing: 0%;

  /* Button Text */
  --font-button-size: 16px;
  --font-button-weight: 700;
  --font-button-line-height: 19px;
  --font-button-letter-spacing: 0%;
  --font-button-transform: uppercase;
}

/* Typography Classes */
.f4f-h1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  line-height: var(--font-h1-line-height);
  letter-spacing: var(--font-h1-letter-spacing);
}

.f4f-h2 {
  font-family: var(--font-family-primary);
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  line-height: var(--font-h2-line-height);
  letter-spacing: var(--font-h2-letter-spacing);
}

.f4f-h3 {
  font-family: var(--font-family-primary);
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  line-height: var(--font-h3-line-height);
  letter-spacing: var(--font-h3-letter-spacing);
}

.f4f-h4 {
  font-family: var(--font-family-primary);
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  line-height: var(--font-h4-line-height);
  letter-spacing: var(--font-h4-letter-spacing);
}

.f4f-body-18-semibold {
  font-family: var(--font-family-primary);
  font-size: var(--font-body-18-semibold-size);
  font-weight: var(--font-body-18-semibold-weight);
  line-height: var(--font-body-18-semibold-line-height);
  letter-spacing: var(--font-body-18-semibold-letter-spacing);
}

.f4f-body-18-regular {
  font-family: var(--font-family-primary);
  font-size: var(--font-body-18-regular-size);
  font-weight: var(--font-body-18-regular-weight);
  line-height: var(--font-body-18-regular-line-height);
  letter-spacing: var(--font-body-18-regular-letter-spacing);
}

.f4f-body-16-regular {
  font-family: var(--font-family-primary);
  font-size: var(--font-body-16-regular-size);
  font-weight: var(--font-body-16-regular-weight);
  line-height: var(--font-body-16-regular-line-height);
  letter-spacing: var(--font-body-16-regular-letter-spacing);
}

.f4f-body-16-bold {
  font-family: var(--font-family-primary);
  font-size: var(--font-body-16-bold-size);
  font-weight: var(--font-body-16-bold-weight);
  line-height: var(--font-body-16-bold-line-height);
  letter-spacing: var(--font-body-16-bold-letter-spacing);
}

.f4f-small-13-regular {
  font-family: var(--font-family-primary);
  font-size: var(--font-small-13-regular-size);
  font-weight: var(--font-small-13-regular-weight);
  line-height: var(--font-small-13-regular-line-height);
  letter-spacing: var(--font-small-13-regular-letter-spacing);
}

.f4f-small-13-medium {
  font-family: var(--font-family-primary);
  font-size: var(--font-small-13-medium-size);
  font-weight: var(--font-small-13-medium-weight);
  line-height: var(--font-small-13-medium-line-height);
  letter-spacing: var(--font-small-13-medium-letter-spacing);
}

.f4f-small-11-regular {
  font-family: var(--font-family-primary);
  font-size: var(--font-small-11-regular-size);
  font-weight: var(--font-small-11-regular-weight);
  line-height: var(--font-small-11-regular-line-height);
  letter-spacing: var(--font-small-11-regular-letter-spacing);
}

.f4f-button-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-button-size);
  font-weight: var(--font-button-weight);
  line-height: var(--font-button-line-height);
  letter-spacing: var(--font-button-letter-spacing);
  text-transform: var(--font-button-transform);
}