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