/* Spacing rules only: scale, touch-target size, rail widths, safe areas. No colours here. */
:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  --btn: 44px;                  /* minimum touch target */
  --rail-btn-w: 52px;
  --rail-btn-h: 46px;
  --rail-w: 68px;
  --status-h: 28px;
  --gesture-zone: 150px;        /* bottom-right corner kept clear of controls (iPadOS system gestures) */
  --gizmo-size: 132px;
  --swatch: 44px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --edge-l: calc(var(--safe-l) + var(--s-3));
  --edge-r: calc(var(--safe-r) + var(--s-3));
  --edge-t: calc(var(--safe-t) + var(--s-3));
  --topbar-h: calc(var(--btn) + var(--s-2) * 2);
  --below-top: calc(var(--edge-t) + var(--topbar-h) + var(--s-2));
  --above-status: calc(var(--safe-b) + var(--status-h) + var(--s-2));
}

:root {
  --colors-w: 108px;            /* right colour rail: two swatch columns + padding */
  --topbar-w: 264px;            /* top bar: five 44px buttons + gaps + padding (measured) */
  --gizmo-h: 246px;             /* gizmo panel height (measured); the palette popover stays above it */
}