/* Reset, base typography, and font loading. Depends on tokens.css being loaded first. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

html, body, h1, h2, h3, h4, p, figure {
  margin: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
  color: var(--torque-ink);
  background: var(--torque-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-header);
  color: var(--torque-ink);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

.text-display {
  font-size: var(--text-display);
  font-weight: var(--weight-light);
  font-family: var(--font-mono);
  line-height: var(--line-height-header);
}

.text-body-small {
  font-size: var(--text-body-small);
}

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

.text-caption {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* Micro-label — the 10px uppercase pattern that sits above almost every
   value in the dense reference (field labels, section titles, form labels) */
.text-micro-label {
  font-size: var(--text-micro-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Mono Data — job numbers, registrations, timestamps, part numbers */
.mono-data,
code,
kbd {
  font-family: var(--font-mono);
  font-size: var(--text-mono-data);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-mono);
}

a {
  color: var(--torque-steel);
}

button {
  font-family: inherit;
}

img, svg {
  max-width: 100%;
  display: block;
}