: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);
    
    /* 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);
    
    /* endregion data rhythm */

    /* region layout tokens: cem-layout-[purpose] (excludes deprecated) */
    --cem-layout-stack-gap: var(--cem-gap-block);
    --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 */
}

/* region spacing mode: dense */
:root[data-cem-spacing="dense"] {
    --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"] {
    --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 */