/* LOUD · base rules
 *
 * THE ONLY GLOBAL CSS IN THE SYSTEM, beyond tokens and state classes. Everything else is an
 * inline style on the element, which is why a screen's appearance is readable from its own
 * markup and nothing else. That is a deliberate constraint, not an oversight: a cascade is a
 * second source of truth for appearance, and this system has one.
 */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--x-canvas);
  color: var(--x-ink);
  font-family: Geist, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* type roles as classes, for the rare case markup cannot carry them inline */
.x-display { font-family: Archivo, sans-serif; font-weight: 700; font-stretch: 87%; font-size: 26px; line-height: 29px; letter-spacing: -0.4px; text-transform: uppercase; }
.x-title   { font-family: Geist, sans-serif; font-weight: 600; font-size: 17px; line-height: 21px; letter-spacing: -0.25px; }
.x-body    { font-family: Geist, sans-serif; font-weight: 400; font-size: 13.5px; line-height: 20px; color: var(--x-ink-2); }
.x-label   { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-ink-3); }
.x-meta    { font-family: 'Geist Mono', monospace; font-size: 12px; line-height: 16px; color: var(--x-ink-3); }
.x-figure  { font-family: 'Geist Mono', monospace; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--x-ink); }