/* WHEELS — Radius tokens
   Hierarchical: 8px buttons/inputs, 12px content cards,
   16px hero/marquee, pill for badges. */

:root {
  --radius-xs:   4px;   /* badge accents, tiny dropdowns */
  --radius-sm:   6px;   /* small inline buttons, menu items */
  --radius-md:   8px;   /* buttons, inputs, category tabs */
  --radius-lg:   12px;  /* content / product / pricing cards */
  --radius-xl:   16px;  /* hero illustration, marquee blocks */
  --radius-pill: 9999px;/* badges, tags */
  --radius-full: 9999px;/* avatars, icon buttons */

  /* semantic */
  --radius-button: var(--radius-md);
  --radius-input:  var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-hero:   var(--radius-xl);
}