:root {
  /* region dimension scale: cem-dim-[size] */  --cem-dim-xx-small: 0.25rem;
  --cem-dim-x-small: 0.5rem;
  --cem-dim-small: 0.75rem;
  --cem-dim-medium: 1rem;
  --cem-dim-large: 1.5rem;
  --cem-dim-x-large: 2rem;
  --cem-dim-xx-large: 4rem;
  --cem-dim-xxx-large: 8rem;

        
  /* endregion dimension scale */

  /* region relationship gaps: cem-gap-[level] */  --cem-gap-related: var(--cem-dim-x-small);
  --cem-gap-group: var(--cem-dim-small);
  --cem-gap-block: var(--cem-dim-medium);
  --cem-gap-section: var(--cem-dim-large);
  --cem-gap-page: var(--cem-dim-x-large);

        
  /* endregion gaps */

  /* region insets: cem-inset-[level] */  --cem-inset-control: var(--cem-dim-x-small);
  --cem-inset-container: var(--cem-dim-medium);
  --cem-inset-surface: var(--cem-dim-large);
  --cem-menu-inset: max(var(--cem-inset-control), var(--cem-coupling-guard-min));
  --cem-menu-item-gap: max(var(--cem-gap-related), calc(2 * var(--cem-coupling-guard-min)));

        
  /* endregion insets */

  /* region reading rhythm: cem-rhythm-reading-[level] */  --cem-rhythm-reading-paragraph: 0.75em;
  --cem-rhythm-reading-section: var(--cem-dim-large);

        
  /* endregion reading rhythm */

  /* region data rhythm: cem-rhythm-data-[level] */  --cem-rhythm-data-row: var(--cem-dim-x-small);
  --cem-rhythm-data-group: var(--cem-dim-medium);
  --cem-data-row-padding-block: var(--cem-control-padding-y);
  --cem-data-row-padding-inline: var(--cem-control-padding-x);
  --cem-data-row-gap: var(--cem-gap-related);
  --cem-data-tree-padding-factor: 0.5;
  --cem-data-tree-indent: var(--cem-control-padding-x);
  --cem-data-tree-padding-inline: 0px;
  --cem-data-tree-column-gap: var(--cem-gap-related);

        
  /* endregion data rhythm */

  /* region layout tokens: cem-layout-[purpose] (excludes deprecated) */
  --cem-layout-stack-gap: var(--cem-gap-block);
  --cem-layout-grid-min: 14rem;
  --cem-layout-cluster-gap: var(--cem-gap-related);
  --cem-layout-gutter: var(--cem-dim-medium);
  --cem-layout-gutter-wide: var(--cem-dim-x-large);
  --cem-layout-gutter-max: var(--cem-dim-xx-large);
  --cem-layout-stack-tight: var(--cem-gap-related);
  --cem-layout-stack-loose: var(--cem-gap-section);
  /* endregion layout tokens */
}

/* An explicit normal boundary restores only density-owned canonical endpoints. */
:root[data-cem-density="normal"], :where([data-cem-density="normal"]) {
  --cem-gap-related: var(--cem-dim-x-small);
  --cem-gap-group: var(--cem-dim-small);
  --cem-gap-block: var(--cem-dim-medium);
  --cem-gap-section: var(--cem-dim-large);
  --cem-inset-control: var(--cem-dim-x-small);
  --cem-menu-inset: max(var(--cem-inset-control), var(--cem-coupling-guard-min));
  --cem-menu-item-gap: max(var(--cem-gap-related), calc(2 * var(--cem-coupling-guard-min)));
  --cem-inset-container: var(--cem-dim-medium);
  --cem-inset-surface: var(--cem-dim-large);
  --cem-layout-gutter: var(--cem-dim-medium);
  --cem-data-row-padding-block: var(--cem-control-padding-y);
  --cem-data-row-padding-inline: var(--cem-control-padding-x);
  --cem-data-row-gap: var(--cem-gap-related);
  --cem-data-tree-indent: var(--cem-control-padding-x);
  --cem-data-tree-padding-inline: 0px;
  --cem-data-tree-column-gap: var(--cem-gap-related);
}

/* Normal spacing resets inherited dense/sparse endpoints without changing density. */
:root[data-cem-spacing="normal"], :where([data-cem-spacing="normal"]) {
  --cem-data-tree-padding-factor: 0.5;
  --cem-gap-related: var(--cem-dim-x-small);
  --cem-gap-group: var(--cem-dim-small);
  --cem-gap-block: var(--cem-dim-medium);
  --cem-gap-section: var(--cem-dim-large);
  --cem-gap-page: var(--cem-dim-x-large);
  --cem-inset-control: var(--cem-dim-x-small);
  --cem-inset-container: var(--cem-dim-medium);
  --cem-inset-surface: var(--cem-dim-large);
  --cem-layout-gutter: var(--cem-dim-medium);
  --cem-layout-gutter-wide: var(--cem-dim-x-large);
  --cem-layout-gutter-max: var(--cem-dim-xx-large);
  --cem-rhythm-reading-paragraph: 0.75em;
  --cem-rhythm-reading-section: var(--cem-dim-large);
  --cem-rhythm-data-row: var(--cem-dim-x-small);
  --cem-rhythm-data-group: var(--cem-dim-medium);
}

/* region spacing mode: dense */
:root[data-cem-spacing="dense"], :where([data-cem-spacing="dense"]) {
  --cem-data-tree-padding-factor: 0.5;
  --cem-gap-related: var(--cem-dim-x-small);
  --cem-gap-group: var(--cem-dim-x-small);
  --cem-gap-block: var(--cem-dim-small);
  --cem-gap-section: var(--cem-dim-medium);
  --cem-gap-page: var(--cem-dim-large);
  --cem-inset-control: var(--cem-dim-x-small);
  --cem-inset-container: var(--cem-dim-small);
  --cem-inset-surface: var(--cem-dim-medium);
  --cem-layout-gutter: var(--cem-dim-small);
  --cem-layout-gutter-wide: var(--cem-dim-large);
  --cem-layout-gutter-max: var(--cem-dim-x-large);
  --cem-rhythm-reading-paragraph: 0.6em;
  --cem-rhythm-reading-section: var(--cem-dim-medium);
  --cem-rhythm-data-row: var(--cem-dim-xx-small);
  --cem-rhythm-data-group: var(--cem-dim-small);
}
/* endregion spacing mode: dense */

/* region spacing mode: sparse */
:root[data-cem-spacing="sparse"], :where([data-cem-spacing="sparse"]) {
  --cem-data-tree-padding-factor: 1;
  --cem-gap-related: var(--cem-dim-small);
  --cem-gap-group: var(--cem-dim-medium);
  --cem-gap-block: var(--cem-dim-large);
  --cem-gap-section: var(--cem-dim-x-large);
  --cem-gap-page: var(--cem-dim-xx-large);
  --cem-inset-control: var(--cem-dim-small);
  --cem-inset-container: var(--cem-dim-large);
  --cem-inset-surface: var(--cem-dim-x-large);
  --cem-layout-gutter: var(--cem-dim-large);
  --cem-layout-gutter-wide: var(--cem-dim-xx-large);
  --cem-layout-gutter-max: var(--cem-dim-xxx-large);
  --cem-rhythm-reading-paragraph: 1em;
  --cem-rhythm-reading-section: var(--cem-dim-x-large);
  --cem-rhythm-data-row: var(--cem-dim-small);
  --cem-rhythm-data-group: var(--cem-dim-large);
}
/* endregion spacing mode: sparse */

/* Compact desktop density keeps the precise-input policy. */
@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  :root[data-cem-density="compact"], :where([data-cem-density="compact"]) {
    --cem-gap-related: 0.25rem;
    --cem-gap-group: 0.5rem;
    --cem-gap-block: 0.5rem;
    --cem-gap-section: 0.75rem;
    --cem-inset-control: 0.25rem;
    --cem-menu-inset: max(var(--cem-inset-control), var(--cem-coupling-guard-min));
    --cem-menu-item-gap: max(var(--cem-gap-related), calc(2 * var(--cem-coupling-guard-min)));
    --cem-inset-container: 0.5rem;
    --cem-inset-surface: 0.75rem;
    --cem-layout-gutter: 0.5rem;
    --cem-data-row-padding-block: var(--cem-control-padding-y);
    --cem-data-row-padding-inline: var(--cem-control-padding-x);
    --cem-data-row-gap: var(--cem-gap-related);
    --cem-data-tree-indent: 1.4em;
    --cem-data-tree-padding-inline: 0.25em;
    --cem-data-tree-column-gap: 0.25em;
  }
}

/* Explicit super-compact content geometry applies on every input modality. */
:root[data-cem-density="super-compact"], :where([data-cem-density="super-compact"]) {
  --cem-gap-related: 0.25rem;
  --cem-gap-group: 0.5rem;
  --cem-gap-block: 0.5rem;
  --cem-gap-section: 0.75rem;
  --cem-inset-control: 0px;
  --cem-menu-inset: 0px;
  --cem-menu-item-gap: var(--cem-gap-related);
  --cem-inset-container: 0px;
  --cem-inset-surface: 0px;
  --cem-layout-gutter: 0px;
  --cem-data-row-padding-block: 0px;
  --cem-data-row-padding-inline: 0px;
  --cem-data-row-gap: 0px;
  --cem-data-tree-indent: 1.4em;
  --cem-data-tree-padding-inline: 0.25em;
  --cem-data-tree-column-gap: 0.25em;
}