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

  html {
    font-family:      var(--font-sans);
    font-size:        var(--text-base);
    line-height:      1.6;
    color:            var(--color-text);
    background-color: var(--color-bg);
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-block-size: 100dvh;
  }

  h1, h2, h3 {
    line-height: 1.25;
    margin-block: 0 var(--space-4);
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

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

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

  p { margin-block: 0 var(--space-4); }

  ul, ol {
    padding-inline-start: var(--space-6);
    margin-block: 0 var(--space-4);
  }

  code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-border);
    padding-inline: var(--space-1);
    border-radius: var(--radius);
  }

  .text-muted {
    color: var(--color-text-muted);
  }
}