/* Interlink — base reset.
 *
 * Small and opinionated, not a framework. It does four things: normalise the box model,
 * remove the margins that fight a design system, bind the two type stacks to the tokens, and
 * make focus and selection correct once so no component has to re-solve them.
 *
 * Load order: fonts.css → tokens.css → reset.css. Every value here comes from a token; if
 * something needs a number that is not in tokens.css, that number belongs in tokens.py.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  /* No `scroll-behavior: smooth` by default — it fights the reduced-motion contract and
     hijacks a keyboard user's in-page jumps. Opt in per link if a page wants it. */
  tab-size: 2;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, pre {
  margin: 0;
}

ol[role='list'],
ul[role='list'] {
  padding: 0;
  list-style: none;
}

body {
  min-height: 100svh;
  font-family: var(--il-font-sans);
  font-size: var(--il-text-body);
  line-height: var(--il-leading-body);
  font-weight: var(--il-wght-regular);
  font-synthesis-weight: none;        /* a real variable weight exists; never fake one */
  font-synthesis-style: none;         /* a real italic ships; never slant the roman */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* background-color and color are set in tokens.css so the theme owns them. */
}

/* Prose gets the better line-breaker; headings get the balanced one. Both degrade silently
   to normal wrapping where unsupported. */
p, li, dd, blockquote, figcaption {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: var(--il-wght-semibold);
  font-stretch: var(--il-wdth-normal);
}

/* Radius 0 is a brand rule, not a default to be overridden (DECISIONS §6). Stated here so a
   UA's own rounding on form controls does not sneak back in. */
button, input, select, textarea, fieldset, dialog, img, video, iframe {
  border-radius: var(--il-radius);
}

img, picture, svg, video, canvas {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* Brand SVGs are themeable by contract: ink = currentColor, accent = var(--il-signal). */
svg {
  fill: currentColor;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
}

button {
  cursor: pointer;
}

code, kbd, samp, pre {
  font-family: var(--il-font-mono);
  font-size: var(--il-text-code);
  line-height: var(--il-leading-code);
}

pre {
  overflow-x: auto;
  background: var(--il-paper-sunk);
  padding: var(--il-space-4);
  /* the ground is paper-sunk, so the hairline for that surface — not the plain one */
  border: var(--il-hairline) solid var(--il-rule-sunk);
}

hr {
  border: 0;
  border-top: var(--il-hairline) solid var(--il-rule);
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: var(--il-hairline);
}

/* One visible focus ring, everywhere, built from the signal — the accent marking an active
   connection, which is exactly what focus is. `:focus-visible` only, so a mouse click does
   not ring a button, but every keyboard path does. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--il-focus-width) solid var(--il-focus);
  outline-offset: var(--il-focus-offset);
}

/* Remove the UA ring only where ours has replaced it, never unconditionally. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

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

::placeholder {
  color: var(--il-ink-muted);
  opacity: 1;
}

:target {
  scroll-margin-block-start: var(--il-space-7);
}

/* The system's own duration tokens already collapse under reduced motion (tokens.css). This
   is the backstop for anything that hardcodes a duration anyway — a broken third-party
   widget must still not animate. It never zeroes layout, only time. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}