/* base.css — body, tipografia base, scrollbar */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-h) + 1rem);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--fg);
    background: var(--bg);
    min-block-size: 100dvh;
    overflow-x: clip;
    /* Aurora animada vive em animations.css → body::before / body::after */
    position: relative;
  }

  body.menu-open {
    overflow: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--fg);
  }

  h1 { font-size: var(--fs-3xl); max-inline-size: 20ch; }
  h2 { font-size: var(--fs-2xl); max-inline-size: 22ch; line-height: 1.1; }
  h3 { font-size: var(--fs-lg); line-height: 1.2; }
  h4 { font-size: var(--fs-md); }

  p { max-inline-size: 65ch; }

  ::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb {
    background: var(--bg-line);
    border-radius: var(--r-pill);
    border: 2px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--brand-deep); }

  /* Skip link */
  .skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: var(--sp-4);
    background: var(--brand);
    color: #fff;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-md);
    font-weight: 600;
    z-index: 9999;
    transition: inset-block-start var(--dur-base) var(--ease-out);
  }
  .skip-link:focus { inset-block-start: var(--sp-4); }

  /* Utilitários screen-reader */
  .u-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}