/* Plain elements: page background, type, links, focus. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer base {
  html { background: var(--page); }
  body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--leading);
    color: var(--ink);
    background: var(--page-wash);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
  }

  h1 { font-size: var(--text-2xl); font-weight: var(--weight-light); letter-spacing: -.02em; line-height: 1.15; margin-block: var(--space-5) var(--space-3); }
  h2 { font-size: var(--text-lg); font-weight: var(--weight-regular); margin-block: var(--space-5) var(--space-3); }
  h3, h4 { font-size: var(--text-md); font-weight: var(--weight-medium); margin-block: var(--space-4) var(--space-2); }
  p { margin-block: var(--space-2); }
  ul, ol { padding-left: 1.2rem; }
  small { font-size: var(--text-sm); }
  strong { font-weight: var(--weight-medium); }

  a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
  a:hover { text-decoration-color: currentColor; }

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