/*
 * The element reset: the handful of rules that make the tokens actually apply to a document.
 *
 * Hand-written and apart from tokens.css, because tokens.css declares values and this decides
 * what the document does with them. Every surface imports both, in this order, before anything
 * of its own. `test/reset.test.ts` asserts each rule below, because a missing reset barely shows
 * in a screenshot.
 */

/*
 * Border-box everywhere. Padding and borders are part of a box's declared size, which is what
 * every measurement in this system assumes.
 */
* {
  box-sizing: border-box;
}

/*
 * The scrollbar's room is kept on every page, scrolling or not, so a page that fits the window
 * (the map) does not move the centred header half a scrollbar's width against one that scrolls.
 * A phone's scrollbar floats over the page and takes no room either way.
 */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  /* A transparent body would show whatever is behind it. */
  background: var(--hq-bg);
  color: var(--hq-ink);
  font: var(--hq-text-base) / var(--hq-leading-normal) var(--hq-font);
  /* Digits line up in a column: times, dates, percentages, the reserves table. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* No word left alone on a paragraph's last line, anywhere: inherited by every text. */
  text-wrap: pretty;
}

/* A heading's lines as even as they can be, rather than a full line and a stray word. */
h1,
h2,
h3 {
  text-wrap: balance;
}

a {
  color: inherit;
}

/*
 * Form controls take the document's typeface. Browsers give a button, an input, a select and a
 * textarea a font of their own (Arial on most), and no library rule overrides the family, so
 * every button in the app and the console was drawn in Arial while a link styled as a button
 * next to it was drawn in the system's face and read as bolder. Only the family is taken from
 * here: a component still sets its own size, weight and line height, on a class.
 */
button,
input,
select,
textarea {
  font-family: inherit;
}

/*
 * One focus ring for the whole system, on `:focus-visible` rather than `:focus`, so a mouse
 * click does not leave a ring behind while a keyboard tab still shows one.
 */
:focus-visible {
  outline: var(--hq-focus-width) solid var(--hq-accent);
  outline-offset: var(--hq-focus-offset);
}

/* Honoured once here rather than per component, where it would be forgotten. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}