/* SPACING — everything is a multiple of one "art pixel" (--px = 4px, one pixel of a 16x16 sprite at 4x).
   That is why nothing in this system is spaced by 5, 6, 10 or 14. */
:root{
--px:4px; /* @kind spacing */

--sp-0:0; /* @kind spacing */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;--sp-40:160px;
/* semantic */
--gap-inline:var(--sp-2);--gap-stack:var(--sp-4);--gap-group:var(--sp-6);--gap-section:var(--sp-24);
--pad-control:var(--sp-2) var(--sp-4);--pad-control-lg:var(--sp-3) var(--sp-6);--pad-panel:var(--sp-6);--pad-panel-lg:var(--sp-8);--pad-card:var(--sp-5);
--inset-page:var(--sp-8);--container:1160px; /* @kind spacing */
--container-narrow:760px; /* @kind spacing */
--container-wide:1440px; /* @kind spacing */

--hud-h:44px; /* @kind spacing */
--rail-w:64px; /* @kind spacing */
--tile:32px; /* @kind spacing */

}