/* ============================================================
   MWG Design & Research — Spacing tokens
   A 4px base grid. The interface is tight: most gaps fall
   between 6 and 16px. Page gutters are larger (26–34px).
   ============================================================ */
: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-11:  22px;   /* section rhythm in detail panel */
  --space-12:  24px;
  --space-16:  32px;   /* page gutter */
  --space-color: 26px;
  --space-20:  40px;
  --space-24:  48px;

  /* semantic */
  --gutter-page:    32px;
  --gutter-panel:   26px;
  --gap-control:    8px;   /* between adjacent controls */
  --gap-inline:     7px;   /* icon ↔ label */
  --gap-section:    22px;  /* between titled sections */
  --pad-control-x:  11px;
  --pad-control-y:  6px;

  /* fixed layout widths from the product */
  --w-detail-panel: 300px;
  --h-control-bar:  40px;
}