@layer base {
  html { scroll-behavior: smooth; }

  body {
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: var(--tracking);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  a { color: var(--color-ink); text-decoration: none; }
  a:hover { color: var(--color-primary); }
  p { margin: 0; }
  h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); text-wrap: balance; }
  ::selection { background: var(--color-accent); color: var(--color-on-accent); }
  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
  [id] { scroll-margin-top: calc(var(--site-header-sticky, 0px) + 24px); }

  /* "Salta al contenuto": fuori schermo finché non riceve il focus da tastiera */
  .skip-link {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    &:focus {
      position: fixed; left: 16px; top: 16px; z-index: 100; width: auto; height: auto; clip-path: none;
      padding: 12px 20px; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink); font-weight: 600;
    }
  }
}