:root{
--r-none:0px;
--r-xs:2px;
--r-sm:3px;
--r-md:4px;
--r-lg:6px;
--r-xl:8px;
--r-2xl:10px;
--r-pill:999px;

/* Semantic. The system is squared: media and cards carry no radius at all,
   controls carry 2px so the corner reads as cut rather than rounded.
   --r-pill survives for one use only: the availability dot and other true circles. */
--r-card:var(--r-none);
--r-media:var(--r-none);
--r-control:var(--r-xs);
--r-field:var(--r-xs);
}