:root {
  /*
  	Note different zooming on desktop and mobile
  	- On desktop
  		- Page zoom enlarges everything and wraps at the window edge
  		- Font size enlarges all elements that have relative (not px) sizes, also causing wrapping
  	- On mobile
  		- Page zoom enlarges full page while keeping element positioning, so that user has to scroll sideways
  		- Font size on MOST browsers has same effect as page zoom on desktop; everything (also px sizes) enlarged and elements wrap at window edge
  	I want to respect user's choice for FONT sizing, so keep all other dimensions in px.
  	Note that px breakpoints still switches to mobile layout on desktop when zoomed
  */
  /*--max-inline-size: 70rem;*/ /* or 1280px? only has effect on desktop */
  --max-page-size: 1266px;
  --max-content-size: 835px;
  --max-header-size: 1920px;
  --page-pad: 16px; /* unclear; there's also design with 30px */
  --line-height: 1.5;
  --gap: 16px;
  --stem: .081rem; /* stem width of Inter font, NB using em here combined with px for icon size can clip icon on large fonts (as line width increases but not icon size) */
  --hairline: 1px; /* or var(--stem)? */
  --border: solid var(--hairline);
  --radius-std: 4px;
  --pill-radius: 1.5em; /* = line-height, makes round ends on elements that are 1 line high */
  --box-radius: 1.5em; /* = pill-radius */
  --icon-size: 1.25em; /* while browsers themselves don't enlarge icons with text zoom, doing so makes it MUCH easier to maintain circular icon buttons */
  --icon-solo-size: 1.5em; /* android default 24px */
  --icon-solo-stroke: min(.1em,1.5px); /* 1.5px, but not more on huge fonts */
  --widget-pad-bl: .5em; /* must be relative to (custom) font size, else widgets won't align */
  --widget-pad-in: 1em;
  /* no icon-only button in current design, but could have an exception rule "button:has(:is(img,svg):only-child)" to make perfectly round buttons */
  --bold: 600;
  --shadow: 0 10px 16px 0 #0004, 0 6px 20px 0 #0002;
}

/*# sourceMappingURL=1-tokens.css.map */