/* Element defaults. Layout that needs no JavaScript and no class (§33). */

@layer base {

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

  body {
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
  }

  main {
    inline-size: min(100% - var(--space-8), var(--content-width));
    margin-inline: auto;
    padding-block: var(--space-8);
  }

  body > header,
  body > footer {
    inline-size: min(100% - var(--space-8), var(--content-width));
    margin-inline: auto;
    padding-block: var(--space-4);
  }

  body > footer {
    border-block-start: 1px solid var(--border);
    color: var(--text-muted);
  }

  p, li {
    max-inline-size: var(--measure);
  }

  h1, h2, h3 {
    line-height: 1.2;
    text-wrap: balance;
  }

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

  code, pre {
    font-family: var(--font-mono);
  }

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