/* ==========================================================================
   base.css - reset, typography, and the browser's own surfaces
   Requires tokens.css.
   ========================================================================== */

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

html {
  /* Bumps the whole rem-based type scale up a step; 15px body text read as too
     small on a normal desktop display. */
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--color-border) transparent;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-base);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  /* optimizeLegibility turns on font kerning, which fights the fixed letter-spacing
     tokens used everywhere here: kern pairs pull some glyphs together while the
     tracking pushes uniformly, so the two roundings disagree and a word gets an
     uneven gap punched into it. Kerning off keeps letter-spacing the only say. */
  font-kerning: none;
}

/* --------------------------------------------------------------------------
   Browser surfaces. Selection, caret, scrollbars, focus ring, underline
   offset and numerals all ship with defaults that belong to no design system.
   -------------------------------------------------------------------------- */

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-fg);
}

:root { caret-color: var(--color-accent); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border: 3px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); }

/* A ring that sits outside the element and never moves the layout. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

/* Figures line up in columns: every number here sits in a field beside another number. */
.mono, code, pre, kbd, samp,
input[type="number"], time, .field-value, .num {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }
h4 { font-size: var(--font-size-base); }

p { text-wrap: pretty; }
p, li { max-width: var(--measure); }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--color-accent-hover); }

code, pre, kbd, samp { font-family: var(--font-mono); }

hr {
  border: 0;
  border-top: var(--rule) solid var(--color-rule);
  margin: var(--space-xl) 0;
}

/* --------------------------------------------------------------------------
   The document voice: a small caps label over a mono value. This pairing is
   the governing component of the whole product, so it lives in base.
   -------------------------------------------------------------------------- */

.label {
  font-family: var(--font-label);
  font-stretch: var(--font-stretch-label);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  line-height: var(--line-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
  display: block;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-mono);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hidden { display: none !important; }

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