/* ============================================================
   DOMAIN · SPACING & SIZING TOKENS
   4px base grid. Dense ERP layouts need fine-grained steps.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;
  --space-40: 80px;

  /* Chrome dimensions (ERP shell) */
  --topbar-height:    52px;
  --tabbar-height:    38px;
  --intentbar-height: 60px;
  --rail-width:       320px;
  --rail-collapsed:   0px;

  /* Control heights — owned by tokens/theming.css (density-driven).
     See --density-control-* there. */

  /* Content maxima */
  --content-narrow: 640px;
  --content-max:    1280px;

  /* Breakpoints — desktop-first ERP. Custom properties can't be used inside
     @media conditions, so these are the canonical VALUES to hard-code in
     media queries and read from JS (getComputedStyle) for matchMedia. */
  --bp-xs:  480px;   /* large phone            */
  --bp-sm:  640px;   /* small tablet / split   */
  --bp-md:  900px;   /* tablet / narrow laptop */
  --bp-lg:  1200px;  /* laptop                 */
  --bp-xl:  1536px;  /* wide desktop           */

  /* Responsive shell overrides: on narrow viewports the right rail collapses
     and chrome thickens for touch. Screens opt in by reading these tokens. */
  --touch-target: 44px;
}

/* Below --bp-md: single-column shell, no persistent side rail, taller chrome
   for touch. Components read --rail-width / control heights, so flipping them
   here reflows the ERP shell without per-component media queries. */
@media (max-width: 899px) {
  :root {
    --rail-width: 0px;
    --topbar-height: 56px;
    --intentbar-height: 64px;
    --content-max: 100%;
  }
}