:root {
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Roles */
  --radius-button: var(--radius-sm);
  --radius-input: var(--radius-sm);
  --radius-card: var(--radius-md);
  --radius-modal: var(--radius-lg);
  --radius-badge: var(--radius-pill);
}