/* tokens.css — Design tokens (load before polish.css).
   These are reference values for new code. Existing inline styles already
   match these values; keep new components within this scale. */

:root {
  /* Spacing scale (4-pt grid) */
  --vh-s-1: 4px;
  --vh-s-2: 8px;
  --vh-s-3: 12px;
  --vh-s-4: 16px;
  --vh-s-5: 20px;
  --vh-s-6: 24px;
  --vh-s-8: 32px;

  /* Radius scale */
  --vh-r-sm: 8px;
  --vh-r-md: 12px;
  --vh-r-lg: 18px;
  --vh-r-pill: 999px;

  /* Type sizes (px) */
  --vh-t-xs: 10px;
  --vh-t-sm: 12px;
  --vh-t-base: 14px;
  --vh-t-md: 16px;
  --vh-t-lg: 19px;
  --vh-t-xl: 24px;
  --vh-t-2xl: 28px;

  /* Motion */
  --vh-ease: cubic-bezier(.2, .7, .2, 1);
  --vh-dur-1: 140ms;
  --vh-dur-2: 220ms;
  --vh-dur-3: 320ms;
}

/* Hard guards: never let the device frame scroll horizontally. */
html, body, #root {
  overflow-x: hidden;
  /* Honor iOS safe-area for any full-bleed page on a real phone */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Minimum touch target everywhere we set fontSize: 11–12 */
button, [role="button"] {
  min-height: 32px;
  min-width: 32px;
}
.vh-touchpad { min-height: 44px; min-width: 44px; }