/* 4 pt grid, radii, control + element sizes. Base frame 390x844 (iOS). */
: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;

  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:20px; --radius-2xl:28px; --radius-pill:999px;
  --radius-input:14px; --radius-banner:14px; --radius-toast:14px;
  --radius-tile:18px;   /* v2.2 — NutrientTile */
  --radius-sheet:24px;  /* v2.2 — pins BottomSheet to its pre-v2.2 24pt top radius, which used to be --radius-2xl */

  --control-sm:36px; --control-md:44px; --control-lg:52px;
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-tab:22px;
  --avatar-sm:28px; --avatar-md:32px; --avatar-lg:80px;
  --thumb-sm:40px; --thumb-md:48px; --thumb-lg:64px;
  --ring-diameter:116px; --ring-stroke:7px;
  --macro-bar-height:4px;
  --nutrient-bar-height:5px;                      /* v2.2 — NutrientTile progress bar */
  --gauge-size:300px; --gauge-stroke:18px;        /* v2.2 — CalorieGauge 180° arc, hero width in a 390/375 frame */
  --gauge-dot-inset:16px;                         /* v2.2 — decorative dotted inner arc offset */
  --avatar-header:40px;                           /* v2.2 — ScreenHeader avatar */
  --tabbar-height:66px; --tabbar-add:60px;
  --tabbar-inset:16px;                            /* v2.2 — side margins of the floating bar */
  --tabbar-gap:12px;                              /* v2.2 — gap between bar and safe area */
  /* v2.2 — bottom content inset EVERY scrollable screen must reserve so nothing hides under the
     floating bar: bar 66 + gap 12 + raised «+» overhang 26 + breathing 16 = 120, plus safe area. */
  --tabbar-content-inset:calc(120px + env(safe-area-inset-bottom, 0px));
  --tap-min:44px;

  --frame-width:390px; --frame-height:844px;
}