:root {
    /* region bend basis — sharp / smooth / round / circle plus active alias */
    --cem-bend-sharp: 0;
    --cem-bend-smooth: var(--cem-dim-x-small);
    --cem-bend-round: calc(var(--cem-shape-height, var(--cem-control-height)) / 2);
    --cem-bend-circle: 50%;
    --cem-bend: var(--cem-bend-smooth);
    
    /* endregion bend basis */

    /* region semantic endpoints — role-first product contract */
    --cem-bend-control: var(--cem-bend);
    --cem-bend-surface: var(--cem-dim-small);
    --cem-bend-overlay: var(--cem-bend);
    --cem-bend-field: var(--cem-bend-control);
    --cem-bend-modal: calc(var(--cem-dim-large) + var(--cem-dim-xx-small));
    --cem-bend-control-round-ends: var(--cem-bend-round);
    --cem-bend-media: var(--cem-bend);
    --cem-bend-avatar: var(--cem-bend-circle);
    
    /* endregion semantic endpoints */

    /* region pattern tokens — asymmetric attachment */
    --cem-bend-attached-edge: var(--cem-bend-sharp);
    --cem-bend-free-edge: var(--cem-bend-modal);
    
    /* endregion pattern tokens */

    /* region action component bindings — geometry owned by D3 */
    --cem-action-border-radius: var(--cem-bend-control);
    
    /* endregion action component bindings */
}

/* region shape mode: sharp — technical, precise brand expression */
:root[data-cem-shape="sharp"] {
    --cem-bend: var(--cem-bend-sharp);
    --cem-bend-control: var(--cem-bend);
    --cem-bend-surface: var(--cem-bend-smooth);
    --cem-bend-overlay: var(--cem-bend-smooth);
    
}
/* endregion shape mode: sharp */

/* region shape mode: round — consumer, welcoming brand expression */
:root[data-cem-shape="round"] {
    --cem-bend: var(--cem-bend-smooth);
    --cem-bend-surface: var(--cem-dim-medium);
    --cem-bend-overlay: var(--cem-bend-smooth);
    
}
/* endregion shape mode: round */