/* Base: reset, type, browser surfaces. DRAFT for mockup review. Uses tokens only. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html, body { min-height: 100%; }

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums; /* Helvetica Neue's figures line up in columns */
  overscroll-behavior-y: none;        /* no rubber-band of the whole PWA */
}

@media (max-width: 743px) {
  body { font-size: var(--fs-17); line-height: var(--lh-17); }
}

h1, h2, h3, h4 { font-weight: var(--fw-bold); font-size: inherit; line-height: inherit; }
p { max-width: 68ch; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
img, svg { display: block; }
ul, ol { padding: 0; list-style: none; }
dialog { padding: 0; border: 0; color: inherit; background: none; max-width: none; max-height: none; }

/* Browser surfaces carry the design too. */
::selection { background: var(--accent-soft); color: var(--text); }
input, textarea { caret-color: var(--accent); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
::placeholder { color: var(--text-2); opacity: 1; }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

.icon {
  width: var(--icon);
  height: var(--icon);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}