/* 4px base grid. Everything — padding, gaps, component heights — is a multiple.
   8px is the default rhythm; 4px only for tight intra-component spacing. */
:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;

  /* Control geometry — one ladder for every interactive element */
  --control-height-sm:28px;
  --control-height-md:36px;
  --control-height-lg:44px;
  --control-padding-x-sm:10px;
  --control-padding-x-md:14px;
  --control-padding-x-lg:18px;
  --control-gap:8px;
  --touch-target-min:44px;

  /* Layout shell */
  --layout-topbar-height:56px;
  --layout-drawer-width:260px;
  --layout-drawer-width-collapsed:60px;
  --layout-rail-width:60px;
  --layout-page-padding:24px;
  --layout-page-padding-wide:32px;
  --layout-content-max:1440px;
  --layout-gutter:24px;
  --layout-columns:12; /* @kind other */

  /* Density */
  --table-row-height:44px;
  --table-row-height-dense:36px;
  --list-row-height:40px;
  --card-padding:20px;
  --card-padding-dense:16px;
  --dialog-padding:24px;

  /* Breakpoints (desktop first) */
  --bp-sm:600px;
  --bp-md:960px;
  --bp-lg:1280px;
  --bp-xl:1600px;
}