:root{
--container-max:1440px; /* @kind spacing */
--container-text:820px; /* @kind spacing */
--gutter:clamp(20px,4vw,64px); /* @kind spacing */
--grid-cols:12; /* @kind other */
--grid-gap:clamp(16px,1.6vw,24px); /* @kind spacing */

/* Corners are square by design. 2px is the ceiling; 999px only for pill tags. */
--radius-0:0; /* @kind radius */
--radius-1:2px; /* @kind radius */
--radius-pill:999px; /* @kind radius */

--border-hair:1px; /* @kind spacing */
--border-strong:2px; /* @kind spacing */
--border-rule:1px; /* @kind spacing */

/* Elevation comes from contrast and hairlines, not shadow. Two exceptions: */
--shadow-sticky:0 1px 0 rgba(11,13,16,.12); /* @kind shadow */
--shadow-overlay:0 24px 64px -24px rgba(11,13,16,.45); /* @kind shadow */

/* Connection motif */
--connector-width:1px; /* @kind spacing */
--connector-node:7px; /* @kind spacing */
--connector-color:var(--rule-strong); /* @kind other */
--connector-color-inv:var(--rule-strong-inv); /* @kind other */

--z-nav:100; /* @kind other */
--z-overlay:200; /* @kind other */
}