:root {
  /* region control geometry — balanced (default) baseline */  --cem-control-height: 2.5rem;
  --cem-control-height-small: 2.5rem;
  --cem-control-height-medium: 3rem;
  --cem-control-height-large: 4rem;
  --cem-control-height-x-large: 6rem;
  --cem-control-height-xx-large: 8rem;
  --cem-control-padding-x: 0.75rem;
  --cem-control-padding-y: 0.5rem;
  --cem-icon-button-size: var(--cem-coupling-zone-min);
  --cem-icon-button-icon-size: 1.25rem;
  --cem-icon-size: 2rem;
  --cem-icon-size-small: 1rem;
  --cem-icon-size-large: 3rem;
  --cem-list-row-height: 3rem;
  --cem-list-popup-rows: 8;
  --cem-menu-row-height: 3rem;
  --cem-table-row-height: 2.5rem;

        
  /* endregion control geometry */

  /* region progress graphic geometry */  --cem-progress-spinner-size: 3rem;
  --cem-progress-track-thickness: 0.25rem;

        
  /* endregion progress graphic geometry */

  /* region slider visual geometry */  --cem-slider-track-thickness: 0.25rem;
  --cem-slider-thumb-size: 1.25rem;

        
  /* endregion slider visual geometry */
}

/* region coupling mode: forgiving — larger visual geometry */
:root[data-cem-coupling="forgiving"] {
  --cem-control-height: 2.75rem;
  --cem-control-padding-x: 1rem;
  --cem-control-padding-y: 0.625rem;
  --cem-list-row-height: 3.25rem;
  --cem-menu-row-height: 3.25rem;
}
/* endregion coupling mode: forgiving */

/* region coupling mode: compact — smaller visual geometry */
:root[data-cem-coupling="compact"] {
  --cem-control-height: 2.25rem;
  --cem-control-padding-x: 0.625rem;
  --cem-control-padding-y: 0.375rem;
  --cem-list-row-height: 2.75rem;
  --cem-menu-row-height: 2.75rem;
}
/* endregion coupling mode: compact */

/* Optional inherited size profiles; explicit geometry wins over coupling height. */

:root[data-cem-size="small"], :where([data-cem-size="small"]) {
  --cem-control-height: var(--cem-control-height-small);
}

:root[data-cem-size="medium"], :where([data-cem-size="medium"]) {
  --cem-control-height: var(--cem-control-height-medium);
}

:root[data-cem-size="large"], :where([data-cem-size="large"]) {
  --cem-control-height: var(--cem-control-height-large);
}

:root[data-cem-size="x-large"], :where([data-cem-size="x-large"]) {
  --cem-control-height: var(--cem-control-height-x-large);
}

:root[data-cem-size="xx-large"], :where([data-cem-size="xx-large"]) {
  --cem-control-height: var(--cem-control-height-xx-large);
}