:root{
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --radius-control: var(--radius-sm);   /* buttons, inputs */
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);
  --radius-media: var(--radius-lg);
  --radius-bubble: var(--radius-2xl);   /* echoes the logo's speech-bubble corners */
}