html,
body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  line-height: var(--lh-normal);
  /* Grayscale antialiasing. On a near-black page subpixel rendering fringes
     light text with colour and thickens it; switching to grayscale is what
     makes the same weight read as crisp rather than smeared. The single
     highest-leverage line in this pass - it touches every glyph in the app.
     Both prefixes: WebKit/Blink and Gecko spell it differently. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* A theme change is instant (the page and its text switch together). */
  transition: none;
}

/* The body size is set on body only. On html it made the root 15px, and
   since every token is in rem, every size in the app rendered at 15/16 of
   what the token says - labels at 11.25px (2026-09-28, readability pass). */
body {
  font-size: var(--fs-body);
  overflow: hidden;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* No single word alone on the last line of a paragraph. */
p, li {
  text-wrap: pretty;
}

.text-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

.text-profit {
  color: var(--color-profit);
}

.text-loss {
  color: var(--color-loss);
}

.text-warning {
  color: var(--color-warning);
}


/* Text for screen readers only (e.g. what an icon-only flag means). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}