:root{
--r-0:0px;
--r-1:4px;
--r-2:8px;
--r-3:12px;
--r-4:18px;
--r-5:28px;
--r-full:999px;

/* The B mark is a speech bubble: three soft corners, one squared tail corner.
   --r-bubble reproduces that geometry for cards, media and callouts. */
--r-bubble:var(--r-4) var(--r-4) var(--r-4) var(--r-0);
--r-bubble-lg:var(--r-5) var(--r-5) var(--r-5) var(--r-0);
--r-card:var(--r-4);
--r-control:var(--r-2);
--r-pill:var(--r-full);
}