:root{
  /* 2px base. Named by px so the source's odd values survive translation. */
  --space-2:2px;  --space-4:4px;  --space-5:5px;  --space-6:6px;  --space-7:7px;
  --space-8:8px;  --space-9:9px;  --space-10:10px;--space-11:11px;--space-12:12px;
  --space-14:14px;--space-16:16px;--space-18:18px;--space-20:20px;--space-22:22px;
  --space-24:24px;--space-28:28px;--space-32:32px;--space-40:40px;--space-48:48px;

  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:14px;
  --radius-2xl:16px;
  --radius-3xl:20px;
  --radius-pill:999px;

  /* Mobile is edge-to-edge: no outer gutter, no outer frame. */
  --shell-radius:0px;
  --shell-inset:0px;
  --gutter:16px;
  --header-h:56px;
  --tabbar-h:60px;
  --drawer-w:272px;
  --drawer-w-rail:68px;
  --content-max:1440px;
  --tap-min:44px;
}

@media (min-width:768px){
  :root{ --gutter:22px; --header-h:60px; }
}
@media (min-width:1024px){
  :root{ --gutter:28px; --shell-radius:16px; --shell-inset:24px; }
}