:root{
/* Corners stay near-square. 3px is the largest radius in the system;
   the only fully round things are badges, dots and avatars. */
--radius-none:0px;
--radius-xs:2px;
--radius-sm:3px;
--radius-pill:999px;
--radius-circle:50%;
--radius-button:2px;
--radius-input:2px;
--radius-card:3px;
--radius-media:3px;
--radius-badge:999px;

--border-width-hair:1px;
--border-width-focus:2px;
--rule-hairline:1px solid var(--border-hairline);
--rule-strong:1px solid var(--border-strong);
}