/* =============================================================
   FONT TOKENS
   CSS custom properties for every heading level and body text.
   Values match style.css — mobile-first, desktop override at 1200px.
   ============================================================= */

:root {
	/* Body / paragraph */
	--font-size-p:   16px;
	--line-height-p: 1.6em;

	/* Headings — mobile */
	--font-size-h1:   28px;
	--line-height-h1: 1.25em;

	--font-size-h2:   24px;
	--line-height-h2: 1.3em;

	--font-size-h3:   20px;
	--line-height-h3: 1.4em;

	--font-size-h4:   18px;
	--line-height-h4: 1.5em;

	--font-size-h5:   16px;
	--line-height-h5: 1.6em;

	--font-size-h6:   16px;
	--line-height-h6: 1.7em;
}

@media only screen and (min-width: 768px) {
	:root {
		--font-size-p:   17px;
		--line-height-p: 1.7em;

		--font-size-h1:   34px;
		--line-height-h1: 1.2em;

		--font-size-h2:   28px;
		--line-height-h2: 1.3em;

		--font-size-h3:   24px;
		--line-height-h3: 1.4em;

		--font-size-h4:   20px;
		--line-height-h4: 1.5em;

		--font-size-h5:   18px;
		--line-height-h5: 1.6em;

		--font-size-h6:   16px;
		--line-height-h6: 1.7em;
	}
}

@media only screen and (min-width: 992px) {
	:root {
		--font-size-p:   16px;
		--line-height-p: 1.75em;

		--font-size-h1:   38px;
		--line-height-h1: 1.2em;

		--font-size-h2:   30px;
		--line-height-h2: 1.3em;

		--font-size-h3:   26px;
		--line-height-h3: 1.4em;

		--font-size-h4:   22px;
		--line-height-h4: 1.5em;

		--font-size-h5:   20px;
		--line-height-h5: 1.6em;

		--font-size-h6:   18px;
		--line-height-h6: 1.7em;
	}
}

@media only screen and (min-width: 1200px) {
	:root {
		--font-size-p:   16px;
		--line-height-p: 1.8em;

		--font-size-h1:   50px;
		--line-height-h1: 1.2em;

		--font-size-h2:   32px;
		--line-height-h2: 1.2em;

		--font-size-h3:   26px;
		--line-height-h3: 1.3em;

		--font-size-h4:   22px;
		--line-height-h4: 1.4em;

		--font-size-h5:   20px;
		--line-height-h5: 1.5em;

		--font-size-h6:   16px;
		--line-height-h6: 1.6em;
	}
}

/* -------------------------------------------------------------
   UTILITY SIZE CLASSES
   Applied by the TinyMCE "Styles" dropdown or directly in
   templates. Each class overrides the visual size of any block
   element while keeping its semantic HTML tag intact.

   Example:  <h1 class="font-p">  — H1 for SEO, body text size
             <p  class="font-h1"> — paragraph that looks like H1
             <h2 class="font-h6"> — H2 for SEO, visually small
   ------------------------------------------------------------- */

.font-p {
	font-size:   var(--font-size-p)   !important;
	line-height: var(--line-height-p) !important;
	font-weight: 400                  !important;
}

.font-h1 {
	font-size:   var(--font-size-h1)   !important;
	line-height: var(--line-height-h1) !important;
	font-weight: 700                   !important;
}

.font-h2 {
	font-size:   var(--font-size-h2)   !important;
	line-height: var(--line-height-h2) !important;
	font-weight: 700                   !important;
}

.font-h3 {
	font-size:   var(--font-size-h3)   !important;
	line-height: var(--line-height-h3) !important;
	font-weight: 600                   !important;
}

.font-h4 {
	font-size:   var(--font-size-h4)   !important;
	line-height: var(--line-height-h4) !important;
	font-weight: 600                   !important;
}

.font-h5 {
	font-size:   var(--font-size-h5)   !important;
	line-height: var(--line-height-h5) !important;
	font-weight: 600                   !important;
}

.font-h6 {
	font-size:   var(--font-size-h6)   !important;
	line-height: var(--line-height-h6) !important;
	font-weight: 600                   !important;
}