: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 */
}

/* Re-resolve height-dependent geometry at local profile boundaries. */
:where([data-cem-size], [size]) {
  --cem-bend-round: calc(var(--cem-shape-height, var(--cem-control-height)) / 2);
}

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