/* ── HP radius — two-tier: sharp buttons (4px) vs soft cards (16px). */
:root {
  --radius-none: 0px;     /* chevron decorations, full-bleed heroes */
  --radius-xs:   2px;     /* secondary chips, sale-tag pills */
  --radius-sm:   3px;     /* small secondary CTA */
  --radius-md:   4px;     /* primary/secondary buttons, inputs */
  --radius-lg:   8px;     /* badge pills, category-icon cards, FAQ rows */
  --radius-xl:   16px;    /* product cards, pricing tiers, photo frames */
  --radius-pill: 9999px;  /* sub-nav tabs, search pill, filter chips */
}