@layer base {
  body {
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 1.075rem;
    line-height: 1.6;
    margin: 0;
    min-width: 0;
  }

  h1,
  h2 {
    font-family: var(--font-display);
    line-height: 1.15;
  }

  h3,
  h4,
  button,
  input,
  textarea,
  select {
    font-family: var(--font-ui);
  }

  a {
    color: var(--action-primary);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.16em;
  }

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

  :focus:not(:focus-visible) {
    outline-width: 2px;
  }

  button,
  input,
  textarea,
  select {
    accent-color: var(--action-primary);
  }

  .skip-link {
    background: var(--surface-panel);
    left: 1rem;
    padding: 0.75rem;
    position: fixed;
    top: -10rem;
    z-index: 10;
  }

  .skip-link:focus {
    top: 1rem;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
    }
  }

  @media (forced-colors: active) {
    * {
      background-image: none !important;
    }
  }
}