:root {
  --paper: #ecf2f3;
  --card: #f8fdff;
  --surface: #dee4e5;
  --ink: #2b3133;
  --muted: #61686a;
  --line: #c9cfd0;
  --line-soft: #dde3e4;
  --pop: #06707e;
  --pop-wash: #e4f0f1;
  --danger: #8a2b14;
  --selection: #bfe0e3;
  --white: #ffffff;
  --ink-hover: #1b2123;
  --gap: 22px;
  --gap-lg: 34px;
  --radius: 10px;
  --t: 140ms;
  /* one full lap of the rolling catalog glimpse on wide screens */
  --t-roll: 72s;
  --font-serif: Fraunces, Superclarendon, "Bookman Old Style", Georgia, serif;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

/* The mini pages in the catalog glimpse are other people's bundles, so they
   are deliberately off Hosti's palette. */
.mini {
  --report-bg: #fff8ed;
  --report-ink: #1a2730;
  --report-line: #d8d4c9;
  --report-blue: #2d6179;
  --report-accent: #e76445;
  --coverage-bg: #ffffff;
  --coverage-ink: #1c2b22;
  --coverage-track: #e5ece8;
  --coverage-good: #2f8f5b;
  --coverage-low: #d49a1f;
  --deck-bg: #1d2b4f;
  --deck-ink: #ffffff;
  --deck-rule: #ff8a3d;
  --latency-bg: #10181f;
  --latency-ink: #c2d0d8;
  --latency-grid: #26343f;
  --latency-trace: #f2b441;
  --changelog-bg: #fbfaf6;
  --changelog-ink: #25272c;
  --changelog-line: #e4e1d7;
  --changelog-added: #2f7d4f;
  --changelog-fixed: #3b5ba8;
  --changelog-changed: #a4621d;
  --e2e-bg: #f2f4f8;
  --e2e-ink: #1f2633;
  --e2e-pass: #45a06a;
  --e2e-fail: #d2493a;
  --e2e-skip: #c9cfdb;
  --incident-bg: #ffffff;
  --incident-ink: #2b2323;
  --incident-rule: #e7dddb;
  --incident-alert: #c43c2a;
  --treemap-bg: #1c1f2b;
  --treemap-ink: #e9ebf3;
  --treemap-a: #6f7fe8;
  --treemap-b: #9da7f0;
  --treemap-c: #d9b75a;
  --treemap-d: #e38a5c;
  --treemap-e: #4a5170;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t: 0ms;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line) var(--paper);
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(43, 49, 51, 0.08) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  caret-color: var(--pop);
  overflow-wrap: break-word;
}

::selection {
  background: var(--selection);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--pop);
  outline-offset: 1px;
  border-radius: 3px;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--paper);
}

::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid var(--paper);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure,
table {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  transition:
    color var(--t) ease,
    text-decoration-color var(--t) ease;
}

a:hover {
  color: var(--pop);
  text-decoration-color: var(--pop);
}

svg {
  display: block;
}