/* Shared corner geometry. Components choose a role, never their own numeric radius.
   Surface: cards, table frames, panels, dialogs and large media.
   Control: buttons, inputs, menu options and compact media.
   Detail: badges, small artwork and compact technical labels.
   Flat edges remain 0; circles and indicators have geometric tokens. */
:root {
  --radius-detail: 4px;
  --radius-control: 8px;
  --radius-surface: 12px;
  --radius-line: 2px;
  --radius-round: 50%;
  --radius-pill: 9999px;
}