/* ── Block A — CSS custom property reference values ─────────────────────── */

:root {
    /* region width basis: epsilon + cem-bp-width-[range]-[min|max] */
    --cem-bp-epsilon: 0.01px;
    --cem-bp-epsilon-css: 0.01px;
    --cem-bp-epsilon-mui: 0.05px;
    --cem-bp-width-compact-min: 0px;
    --cem-bp-width-compact-max: calc(var(--cem-bp-width-medium-min) - var(--cem-bp-epsilon));
    --cem-bp-width-medium-min: 600px;
    --cem-bp-width-medium-max: calc(var(--cem-bp-width-expanded-min) - var(--cem-bp-epsilon));
    --cem-bp-width-expanded-min: 840px;
    --cem-bp-width-expanded-max: calc(var(--cem-bp-width-large-min) - var(--cem-bp-epsilon));
    --cem-bp-width-large-min: 1200px;
    --cem-bp-width-large-max: calc(var(--cem-bp-width-xlarge-min) - var(--cem-bp-epsilon));
    --cem-bp-width-xlarge-min: 1600px;
    
    /* endregion width basis */

    /* region height basis: cem-bp-height-[range]-[min|max] */
    --cem-bp-height-compact-min: 0px;
    --cem-bp-height-compact-max: calc(var(--cem-bp-height-medium-min) - var(--cem-bp-epsilon));
    --cem-bp-height-medium-min: 480px;
    --cem-bp-height-medium-max: calc(var(--cem-bp-height-expanded-min) - var(--cem-bp-epsilon));
    --cem-bp-height-expanded-min: 900px;
    
    /* 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) */
    --cem-cq-width-compact-max: calc(var(--cem-cq-width-medium-min) - var(--cem-bp-epsilon));
    --cem-cq-width-medium-min: 600px;
    --cem-cq-width-medium-max: calc(var(--cem-cq-width-expanded-min) - var(--cem-bp-epsilon));
    --cem-cq-width-expanded-min: 840px;
    --cem-cq-width-expanded-max: calc(var(--cem-cq-width-large-min) - var(--cem-bp-epsilon));
    --cem-cq-width-large-min: 1200px;
    
    /* 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: 599.99px) {
:root {
    --cem-bp-active-width: compact;
}
}
        
@media (min-width: 600px) and (max-width: 839.99px) {
:root {
    --cem-bp-active-width: medium;
}
}
        
@media (min-width: 840px) and (max-width: 1199.99px) {
:root {
    --cem-bp-active-width: expanded;
}
}
        
@media (min-width: 1200px) and (max-width: 1599.99px) {
:root {
    --cem-bp-active-width: large;
}
}
        
@media (min-width: 1600px) {
:root {
    --cem-bp-active-width: xlarge;
}
}
        

/* Height helpers (informative — most apps adapt on width only) */

@media (max-height: 479.99px) {
:root {
    --cem-bp-active-height: compact;
}
}
        
@media (min-height: 480px) and (max-height: 899.99px) {
:root {
    --cem-bp-active-height: medium;
}
}
        
@media (min-height: 900px) {
:root {
    --cem-bp-active-height: expanded;
}
}
        

/* ── 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.        */