:root {
  --radius: 10px; /* 0.625rem, the product base */
  --radius-sm: calc(var(--radius) * 0.6); /* 6px */
  --radius-md: calc(var(--radius) * 0.8); /* 8px */
  --radius-lg: var(--radius); /* 10px */
  --radius-xl: calc(var(--radius) * 1.4); /* 14px */
  --radius-2xl: calc(var(--radius) * 1.8); /* 18px */
  --radius-3xl: calc(var(--radius) * 2.2); /* 22px */
  --radius-4xl: calc(var(--radius) * 2.6); /* 26px — badges/pills */
  --radius-full: 9999px;
}