/* base.css — reset universal + estils base de body, links i botons.
 *
 * Depèn de tokens.css (necessita --bg, --ink, --gap, --radius).
 * Carrega'l SEMPRE després de tokens.css i abans de qualsevol estil
 * específic del projecte.
 *
 * Convencions:
 *  - Reset agressiu (margin/padding 0) per evitar sorpreses cross-browser
 *  - body amb Inter per defecte (cada projecte pot override per fonts pròpies
 *    com Playfair Display a Transitem)
 *  - <button> reset a transparent (perquè els components els estilitzen)
 *  - <a> hereta color (els components decideixen)
 */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Reserve scrollbar gutter permanently. Without this, the page content
   shifts a few pixels horizontally when the splash dismisses (splash
   has overflow:hidden → no scrollbar; page → scrollbar appears). With
   stable, the gutter is always reserved, eliminating the shift.
   Browser support: 92%+ globally (Chrome 94, Firefox 97, Safari 16). */
html {
  /* overflow-y: scroll locks a scroll context on the html element so
     `scrollbar-gutter: stable` always reserves the gutter — even
     during splash overflow:hidden transitions and on short pages
     that briefly fit the viewport. Without this, the gutter can
     vanish for a frame and reappear, producing a 1-2 px horizontal
     shift. Combined with the auto-hiding thumb CSS below the
     reserved space stays visually empty until the user scrolls. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Auto-fading scrollbar — thumb invisible at rest, fades in while
   scrolling, fades out shortly after. The .is-scrolling class is
   toggled by shared/js/scroll-autohide.js.

   Important: NO transition on the <html> element — that was creating
   a wider repaint each scroll event and being perceived as a tiny
   page movement. The transition lives only on the thumb itself
   (::-webkit-scrollbar-thumb), which is a localised paint. Times
   are also short (80 ms in / 250 ms out) so the colour change
   registers as 'just appearing' rather than 'animating in'.

   The track and the thumb box are always present — only the rgba
   alpha animates. Combined with overflow-y:scroll + scrollbar-gutter:
   stable above, the structure never changes. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0) transparent;
}
html.is-scrolling {
  scrollbar-color: rgba(0, 0, 0, .42) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-track-piece { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:horizontal:decrement,
::-webkit-scrollbar-button:horizontal:increment {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  visibility: hidden !important;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color 250ms ease-out;
}
html.is-scrolling ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .42);
  transition: background-color 80ms ease-out;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, .65) !important;
  transition: background-color 80ms ease-out;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}