/*
 * Product shape contract: controls and inner surfaces use a restrained 6px
 * radius, while large outer surfaces use 8px. Use the circle token only for
 * semantic circles such as avatars, status dots, and radial indicators. The
 * pill token is reserved for controls whose meaning depends on a capsule;
 * the none token joins structural rails and shell seams without rounding.
 */
:root {
  --radius-none: 0px;
  --radius: 6px;
  --radius-surface: 8px;
  --radius-circle: 50%;
  --radius-pill: 999px;
  --radius-grip: var(--radius);
}