/* File-versioned typography tokens also avoid Zephyr's fixed style.css cache version. */
:root {
	--magic-heading-very-small-font-size: 1.2vw;
	--magic-heading-very-small-line-height: 1.5;
	--magic-heading-extra-large-font-size: 2.65vw;
	--magic-heading-extra-large-line-height: 1.5;
	--magic-heading-xxl-font-size: 3.15vw;
	--magic-heading-xxl-line-height: 1.5;
	--magic-heading-large-font-size: 2.15vw;
	--magic-heading-large-line-height: 1.5;
	--magic-heading-medium-font-size: 1.7vw;
	--magic-heading-medium-line-height: 1.5;
	--magic-heading-small-font-size: 1.45vw;
	--magic-heading-small-line-height: 1.5;
	--magic-text-very-small-font-size: 0.7vw;
	--magic-text-very-small-line-height: 1.5;
	--magic-text-extra-large-font-size: 1.2vw;
	--magic-text-extra-large-line-height: 1.5;
	--magic-text-xxl-font-size: 1.7vw;
	--magic-text-xxl-line-height: 1.5;
	--magic-text-large-font-size: 1.05vw;
	--magic-text-large-line-height: 1.5;
	--magic-text-medium-font-size: 0.95vw;
	--magic-text-medium-line-height: 1.5;
	--magic-text-small-font-size: 0.8vw;
	--magic-text-small-line-height: 1.5;
}

/*
 * Untouched Design fields output no preset classes. Apply Text M through
 * inheritance from the scaling container and expose Heading M to its heading
 * descendants. Explicit preset classes below override these default tokens.
 */
:is(.scaleMe, .w-grid-item) {
	--magic-active-heading-font-size: var(--magic-heading-medium-font-size);
	--magic-active-heading-line-height: var(--magic-heading-medium-line-height);
	--magic-active-text-font-size: var(--magic-text-medium-font-size);
	--magic-active-text-line-height: var(--magic-text-medium-line-height);
	font-size: var(--magic-active-text-font-size);
	line-height: var(--magic-active-text-line-height);
}

.l-header {
	--magic-active-heading-font-size: var(--magic-heading-medium-font-size);
	--magic-active-heading-line-height: var(--magic-heading-medium-line-height);
	--magic-active-text-font-size: var(--magic-text-medium-font-size);
	--magic-active-text-line-height: var(--magic-text-medium-line-height);
	font-size: var(--magic-active-text-font-size);
	line-height: var(--magic-active-text-line-height);
}

:is(.scaleMe, .w-grid-item) :is(h1, h2, h3, h4, h5, h6),
:is(h1, h2, h3, h4, h5, h6):is(.scaleMe, .w-grid-item),
.l-header :is(h1, h2, h3, h4, h5, h6) {
	font-size: var(--magic-active-heading-font-size);
	line-height: var(--magic-active-heading-line-height);
}

:is(.scaleMe, .w-grid-item) :is(p, table, td, th, li),
:is(p, table, td, th, li):is(.scaleMe, .w-grid-item),
.l-header :is(p, table, td, th, li) {
	font-size: var(--magic-text-font-size, var(--magic-active-text-font-size));
	line-height: var(--magic-text-line-height, var(--magic-active-text-line-height));
}

/* Allow Design size presets on native Grid Layout elements without a scaleMe row. */
.mt-heading_size_very-small {
	--magic-active-heading-font-size: var(--magic-heading-very-small-font-size);
	--magic-active-heading-line-height: var(--magic-heading-very-small-line-height);
}

.mt-heading_size_small {
	--magic-active-heading-font-size: var(--magic-heading-small-font-size);
	--magic-active-heading-line-height: var(--magic-heading-small-line-height);
}

.mt-heading_size_medium {
	--magic-active-heading-font-size: var(--magic-heading-medium-font-size);
	--magic-active-heading-line-height: var(--magic-heading-medium-line-height);
}

.mt-heading_size_large {
	--magic-active-heading-font-size: var(--magic-heading-large-font-size);
	--magic-active-heading-line-height: var(--magic-heading-large-line-height);
}

.mt-heading_size_extra-large {
	--magic-active-heading-font-size: var(--magic-heading-extra-large-font-size);
	--magic-active-heading-line-height: var(--magic-heading-extra-large-line-height);
}

.mt-heading_size_xxl {
	--magic-active-heading-font-size: var(--magic-heading-xxl-font-size);
	--magic-active-heading-line-height: var(--magic-heading-xxl-line-height);
}

:is(
	.mt-heading_size_very-small,
	.mt-heading_size_small,
	.mt-heading_size_medium,
	.mt-heading_size_large,
	.mt-heading_size_extra-large,
	.mt-heading_size_xxl
) :is(h1, h2, h3, h4, h5, h6),
:is(h1, h2, h3, h4, h5, h6):is(
	.mt-heading_size_very-small,
	.mt-heading_size_small,
	.mt-heading_size_medium,
	.mt-heading_size_large,
	.mt-heading_size_extra-large,
	.mt-heading_size_xxl
),
.w-grid-item :is(h1, h2, h3, h4, h5, h6):is(
	.mt-heading_size_small,
	.mt-heading_size_very-small,
	.mt-heading_size_medium,
	.mt-heading_size_large,
	.mt-heading_size_extra-large,
	.mt-heading_size_xxl
) {
	font-size: var(--magic-active-heading-font-size);
	line-height: var(--magic-active-heading-line-height);
}

.mt-text_size_very-small {
	--magic-active-text-font-size: var(--magic-text-very-small-font-size);
	--magic-active-text-line-height: var(--magic-text-very-small-line-height);
}

.mt-text_size_small {
	--magic-active-text-font-size: var(--magic-text-small-font-size);
	--magic-active-text-line-height: var(--magic-text-small-line-height);
}

.mt-text_size_medium {
	--magic-active-text-font-size: var(--magic-text-medium-font-size);
	--magic-active-text-line-height: var(--magic-text-medium-line-height);
}

.mt-text_size_large {
	--magic-active-text-font-size: var(--magic-text-large-font-size);
	--magic-active-text-line-height: var(--magic-text-large-line-height);
}

.mt-text_size_extra-large {
	--magic-active-text-font-size: var(--magic-text-extra-large-font-size);
	--magic-active-text-line-height: var(--magic-text-extra-large-line-height);
}

.mt-text_size_xxl {
	--magic-active-text-font-size: var(--magic-text-xxl-font-size);
	--magic-active-text-line-height: var(--magic-text-xxl-line-height);
}

:is(
	.mt-text_size_very-small,
	.mt-text_size_small,
	.mt-text_size_medium,
	.mt-text_size_large,
	.mt-text_size_extra-large,
	.mt-text_size_xxl
) {
	font-size: var(--magic-text-font-size, var(--magic-active-text-font-size));
	line-height: var(--magic-text-line-height, var(--magic-active-text-line-height));
}

.w-grid-item :is(p, td, th, li, table):is(
	.mt-text_size_small,
	.mt-text_size_very-small,
	.mt-text_size_medium,
	.mt-text_size_large,
	.mt-text_size_extra-large,
	.mt-text_size_xxl
) {
	font-size: var(--magic-text-font-size, var(--magic-active-text-font-size));
	line-height: var(--magic-text-line-height, var(--magic-active-text-line-height));
}