:root {
  /* Two shapes carry the brand: fully-round pills for anything interactive,
     and a 16px soft square for panels. */
  --radius-xs: 3px;    /* heatmap cells */
  --radius-sm: 5px;    /* checkbox */
  --radius-md: 8px;    /* small chips, inline swatches */
  --radius-lg: 12px;   /* nested / inner panels */
  --radius-xl: 16px;   /* cards */
  --radius-2xl: 20px;  /* app shell */
  --radius-3xl: 28px;
  --radius-pill: 999px; /* buttons, inputs, nav items, bar caps */
}