/* Reset and element defaults. Everything else builds on this. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); font-weight: var(--weight-bold); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; }

pre {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  background: var(--c-surface-sunken);
  border: var(--border-thin);
  border-radius: var(--radius);
}

/* A visible, consistent focus ring everywhere. Keyboard operators need to
   know where they are, and :focus-visible keeps it off mouse clicks. */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link: the first tab stop on the page. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--duration) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* Available to screen readers, invisible on screen. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}