/* ============================================================
   RADIUS — strict grammar, nothing in between.
   sm  = compact utility (nav buttons, inline image)
   md  = the rare pearl-button capsule
   lg  = utility cards / accessory grid
   pill = the signature action shape (CTAs, search, chips)
   ============================================================ */
:root {
  --radius-none: 0px;    /* full-bleed tiles never round */
  --radius-xs:   5px;    /* inline link styled as a subtle chip (rare) */
  --radius-sm:   8px;    /* dark utility buttons, inline card imagery */
  --radius-md:   11px;   /* pearl-button capsule */
  --radius-lg:   18px;   /* store / accessory utility cards */
  --radius-pill: 9999px; /* primary blue pills, search input, chips */
  --radius-full: 9999px; /* circular control chips over photography */

  /* semantic */
  --radius-button: var(--radius-pill);
  --radius-card: var(--radius-lg);
  --radius-utility: var(--radius-sm);
  --radius-input: var(--radius-pill);
}