/* Space is always a multiple of 8 (4 exists for tight icon/label pairs). */
:root{
  --space-0:0px;
  --space-50:4px;
  --space-100:8px;
  --space-150:12px;
  --space-200:16px;
  --space-300:24px;
  --space-400:32px;
  --space-600:48px;
  --space-800:64px;
  --space-1200:96px;

  /* Standard spacing decisions */
  --space-between-items:var(--space-400);      /* 32 */
  --space-between-sections:var(--space-600);   /* 48 */
  --space-heading-paragraph:var(--space-300);  /* 24 */

  /* Container density */
  --density-compact:var(--space-100);  /* 8 */
  --density-default:var(--space-200);  /* 16 */
  --density-comfy:var(--space-300);    /* 24 */

  /* Layout — 12-column grid, max 70em; 16-column variant max 96em (CMS) */
  --grid-columns:12; /* @kind other */
  --grid-max-width:1120px;
  --grid-max-width-16:1536px;
  --grid-gutter:32px;
  --grid-gutter-tight:16px;
  --page-margin-small:16px;
  --page-margin-large:32px;
  --app-content-padding:16px;

  /* Sizes */
  --touch-target-min:48px;
  --control-height-sm:40px;
  --control-height-md:48px;
  --control-height-lg:56px;
  --icon-size-min:24px;
  --icon-size-md:32px;
  --icon-size-max:64px;
}
@media (min-width:672px){:root{--breakpoint-small:672px /* @kind other */}}