/* Base element styles — values from design-system.md §5 and POC index.html. */
@layer base {
  /* Light-only site: opt out of dark-mode UA form controls/scrollbars. */
  :root {
    color-scheme: light;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--pk-font-sans);
    font-size: var(--pk-text-body); /* 16px floor — never smaller on any device */
    line-height: 1.6;
    color: var(--pk-ink);
    background: var(--pk-paper);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-weight: 600;
    color: var(--pk-steel);
    line-height: 1.15;
    margin-block-end: var(--pk-space-4);
    letter-spacing: -0.01em;
  }

  h1 { font-size: var(--pk-text-h1); letter-spacing: -0.02em; }
  h2 { font-size: var(--pk-text-h2); scroll-margin-top: 80px; }
  h3 { font-size: var(--pk-text-h3); letter-spacing: -0.005em; }
  h4 { font-size: var(--pk-text-h4); letter-spacing: 0; }

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

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

  a:hover {
    color: var(--pk-marine-hover);
  }

  :focus-visible {
    outline: 2px solid var(--pk-marine);
    outline-offset: 2px;
    border-radius: 2px;
  }

  ::selection {
    background: var(--pk-marine);
    color: var(--pk-white);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition: none !important;
      animation: none !important;
    }

    html {
      scroll-behavior: auto;
    }
  }
}