/*
 * base.css — Body, typography defaults, focus states.
 *
 * Uses self-hosted Roboto (variable, weights 100-900). Body text sits on
 * solid background plates over the ambient dot layer for clean reading.
 */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-fg);
  background: var(--color-bg);
}

/* Headings — heaviest Roboto weight, very tight tracking. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--color-fg);
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.05em;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.035em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Display heading utility (hero) */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.05em;
}

/* Lead paragraph — slightly larger, softer weight */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-fg-soft);
  font-weight: var(--fw-regular);
  letter-spacing: -0.005em;
}

/* Body paragraph */
p {
  max-width: 66ch;
}

/* Mono utility (chapter numbers, metadata, chrome) — Roboto medium for
 * crispness at small sizes (the old Roboto Mono pixelated on non-Retina). */
.mono,
[class*="meta"] {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Muted text */
.muted { color: var(--color-muted); }

/* Faint label — even quieter */
.faint { color: var(--color-faint); }

/* Hairline divider */
.hairline {
  display: block;
  width: 100%;
  height: var(--hairline-width);
  background: var(--color-hairline);
  border: none;
}

/* Links — base style */
a {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color var(--dur-base) var(--ease-out-soft);
}

/* Inline link with animated underline */
a.inline {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size var(--dur-medium) var(--ease-spring),
              color var(--dur-base) var(--ease-out-soft);
  padding-bottom: 0.1em;
}

a.inline:hover,
a.inline:focus-visible {
  background-size: 100% 1px;
}

/* Focus states — visible, accessible, monochrome */
:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 4px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Disable selection on canvas + decorative elements */
canvas,
.no-select {
  user-select: none;
  -webkit-user-select: none;
}

/* Selection: pure inversion */
::selection {
  background: var(--color-fg);
  color: var(--color-bg);
}

/* Note: the old .blend utility (mix-blend-mode: difference) has been
 * removed. Text now sits on solid background plates that occlude the
 * ambient dot layer behind them — see "READABILITY PLATE" in
 * components.css. Dots never interact with text anymore. */