/* ── Block A — CSS custom property reference values ─────────────────────── */
:root {
/* region width basis: epsilon + cem-bp-width-[range]-[min|max] */
{normalize-space(xhtml:td[1])}: {normalize-space(xhtml:td[2])};
/* endregion width basis */
/* region height basis: cem-bp-height-[range]-[min|max] */
{normalize-space(xhtml:td[1])}: {normalize-space(xhtml:td[2])};
/* endregion height basis */
/* region container query reference values: cem-cq-width-[range]-[min|max] */
/* Consumer must provide container-type: inline-size (see R-D1x-WRAP) */
{normalize-space(xhtml:td[1])}: {normalize-space(xhtml:td[2])};
/* endregion container query reference values */
}
/* ── Block B — @media active-width helpers ───────────────────────────────── */
/* Sets --cem-bp-active-width; read via JS: getComputedStyle(root).getPropertyValue('--cem-bp-active-width').trim() */
@media (max-width: {$max-w}) {
:root {
--cem-bp-active-width: {$range};
}
}
@media (min-width: {$min-w}) {
:root {
--cem-bp-active-width: {$range};
}
}
@media (min-width: {$min-w}) and (max-width: {$max-w}) {
:root {
--cem-bp-active-width: {$range};
}
}
/* Height helpers (informative — most apps adapt on width only) */
@media (max-height: {$max-h}) {
:root {
--cem-bp-active-height: {$range};
}
}
@media (min-height: {$min-h}) {
:root {
--cem-bp-active-height: {$range};
}
}
@media (min-height: {$min-h}) and (max-height: {$max-h}) {
:root {
--cem-bp-active-height: {$range};
}
}
/* ── Block C — @container helpers ────────────────────────────────────────── */
/* Deferred: CEM does not emit @container selectors (R-D1x-WRAP). */
/* Use --cem-cq-width-* reference values in your own @container rules. */
cem-bp-basis — width + epsilon basis tokens
Token
Value
Tier
Description
{$token}
{$value}
{$tier}
{$desc}
cem-bp-height — height basis tokens
Token
Value
Tier
Description
{$token}
{$value}
{$tier}
{$desc}
cem-bp-cq — container query reference values
Token
Value
Tier
Description
{$token}
{$value}
{$tier}
{$desc}
{$css-body}