/* base.css */
@layer base {
  html { color-scheme: dark; scroll-padding-top: var(--scroll-padding); }

  body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* Media */
  img, svg, video { max-width: 100%; height: auto; }

  /* Containers */
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); }
  .reading { max-width: var(--reading-max); }

  /* Links */
  a { color: inherit; text-underline-offset: 0.22em; }
  a:hover { text-decoration-thickness: 2px; }

  /* Focus */
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

  /* Headings */
  h1, h2, h3, h4 {
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-3);
    scroll-margin-top: var(--scroll-padding);
  }
  h1 { font-size: var(--text-4xl); letter-spacing: -0.01em; }
  h2 { font-size: var(--text-3xl); letter-spacing: -0.01em; }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }

  /* Body text */
  p { margin: 0 0 var(--space-4); }
  .lede { font-size: var(--text-lg); color: var(--muted); max-width: var(--reading-max); }
  .muted { color: var(--muted); }

  /* Lists */
  ul, ol { margin: 0 0 var(--space-4); padding-left: 1.1rem; }
  li { margin: 0 0 var(--space-2); }

  /* Rules */
  hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

  /* Main baseline spacing */
  main#main { padding: var(--space-6) 0; }

  /* Skip link */
  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: -3rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: #fff;
    color: #000;
    font-weight: 600;
    z-index: 9999;
    text-decoration: none;
    transition: top var(--dur-2) var(--ease);
  }
  .skip-link:focus { top: var(--space-4); }

  /* Reduce motion baseline */
  @media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
  }
}