/* Base styles: reset and document defaults. Uses tokens only. */

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

html, body { margin: 0; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font: var(--weight-regular) var(--text-md) / var(--leading-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--color-dim); }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

img, svg { display: block; }

/* Visually hidden, still read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes pd-spin { to { transform: rotate(360deg); } }