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

  body {
    background: var(--surface-page);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  a { color: var(--link); }
  a:hover { color: var(--link-hover); }
  h1, h2, h3, h4 { font-family: var(--font-display); }
  /* Focus: outline del browser, sempre visibile (niente outline: none) */
  [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

  /* "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; background: var(--text-strong); color: var(--text-inverse); font-weight: 600; text-decoration: none;
    }
  }
}