/* Spacing is named by use, not by a numeric ladder — the values are the ones
   the interface actually renders. Do not snap them to a 4/8px grid. */
:root{
  --os-gap-tight:5px;      /* between tiles in a single-choice group */
  --os-gap-list:6px;       /* between list rows that are separate objects */
  --os-gap-inline:9px;     /* icon to its text */
  --os-gap-stack:12px;     /* stacked fields inside one group */
  --os-gap-group:16px;     /* between groups inside a section */
  --os-section-gap:22px;   /* between sections */
  --os-band-gap:30px;      /* between broadsheet bands (desktop) */

  --os-pad-chip:3px 7px;
  --os-pad-field:11px 13px;
  --os-pad-field-lg:14px 15px;
  --os-pad-tile:13px 15px;
  --os-pad-tile-compact:9px 13px;
  --os-pad-card:15px 15px 17px;
  --os-pad-button:10px 18px;
  --os-pad-note:12px 14px;

  --os-gutter-mobile:16px;
  --os-gutter-desktop:28px;

  --os-hit-min:44px;       /* every mobile target, without exception */

  /* The bottom bar, measured — not assumed. 57px is the rendered height of
     BottomTabBar with the approved 12.5px label; the prototype's 54px was
     measured against a 10.5px label that is not on the scale. --os-tabbar-h
     includes the safe-area inset the bar applies to itself, so anything
     stacking above it clears the whole occupied box and never adds the inset
     a second time. Content padding still derives from a MEASURED bar height
     plus this token — never from a constant alone. */
  --os-safe-bottom:env(safe-area-inset-bottom,8px);
  --os-tabbar-content-h:57px;
  --os-tabbar-h:calc(57px + env(safe-area-inset-bottom,8px));
}