/*
 * Minimal element defaults so plain HTML already looks like the identity.
 * Requires system.css and a skin (or the combined tokens/tokens.css); pairs
 * with type.css. Safe to drop into any project.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--w-regular) var(--step-0) / var(--lh-body) var(--font-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1 { font: var(--w-medium) var(--step-4) / var(--lh-title) var(--font-display); letter-spacing: var(--ls-display); }
h2 { font: var(--w-regular) var(--step-3) / var(--lh-heading) var(--font-display); letter-spacing: var(--ls-display); }
h3 { font: var(--w-medium) var(--step-1) / var(--lh-subhead) var(--font-display); }
h4 { font: var(--w-semibold) var(--step-0) / var(--lh-ui) var(--font-text); }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

hr {
  border: 0;
  border-top: var(--border);
  margin: var(--space-7) 0;
}

img, svg {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--gold-wash);
}

/* A marked passage: the quiet wash, never the browser's yellow. */
mark {
  background: var(--accent-wash);
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}