/**
 * Huazotl typography — Lexend / project type scale.
 *
 * The scale is intentionally low-specificity so semantic headings in editorial
 * content receive the Huazotl hierarchy while compact Wapuos components
 * (product cards, Quick View, menus, dialogs, etc.) can keep their own sizes.
 */

:root {
	--huazotl-font-family: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--huazotl-type-h1: 2.986rem;
	--huazotl-type-h2: 2.488rem;
	--huazotl-type-h3: 2.074rem;
	--huazotl-type-h4: 1.728rem;
	--huazotl-type-h5: 1.44rem;
	--huazotl-type-h6: 1.2rem;
	--huazotl-type-body: 1rem;
	--huazotl-type-small: .833rem;
	--huazotl-type-micro: .694rem;
}

body.huazotl-theme {
	font-family: var(--huazotl-font-family) !important;
	font-size: var(--huazotl-type-body);

	/* Child-theme typography identity also feeds Wapuos components that use these tokens. */
	--wtds-font-display: var(--huazotl-font-family);
	--wtds-font-text: var(--huazotl-font-family);
}

body.huazotl-theme :is(button, input, select, textarea) {
	font-family: inherit;
}

/*
 * Editorial scale.
 * :where() keeps specificity at zero, so a component class such as
 * .wapu-product-card__name or .wapu-archive-qv__title always wins naturally.
 */
:where(body.huazotl-theme) :where(h1) { font-size: var(--huazotl-type-h1); }
:where(body.huazotl-theme) :where(h2) { font-size: var(--huazotl-type-h2); }
:where(body.huazotl-theme) :where(h3) { font-size: var(--huazotl-type-h3); }
:where(body.huazotl-theme) :where(h4) { font-size: var(--huazotl-type-h4); }
:where(body.huazotl-theme) :where(h5) { font-size: var(--huazotl-type-h5); }
:where(body.huazotl-theme) :where(h6) { font-size: var(--huazotl-type-h6); }

:where(body.huazotl-theme) :where(p) {
	font-size: var(--huazotl-type-body);
}

:where(body.huazotl-theme) :where(small),
:where(body.huazotl-theme) .huazotl-small {
	font-size: var(--huazotl-type-small);
}

:where(body.huazotl-theme) .huazotl-micro {
	font-size: var(--huazotl-type-micro);
}

/*
 * Product cards are compact UI, not editorial headings.
 * Keep their identity calm even if the name is rendered with a heading element.
 */
body.huazotl-theme .wapu-product-card__name {
	font-size: var(--huazotl-type-body) !important;
	line-height: 1.35;
}

body.huazotl-theme .wapu-product-card__price-wrap,
body.huazotl-theme .wapu-product-card__price-wrap :is(.amount, bdi) {
	font-size: var(--huazotl-type-body);
}