/*
 * Base Styles
 * - Reset mínim
 * - Defaults de body
 * - Links
 * - Focus accessible
 * - Helpers d’accessibilitat
 */

/* Box sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Reset margins */
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }

/* Body defaults */
html { font-size: var(--html-font-size, 100%); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Images */
img { max-width: 100%; height: auto; display: block; }

/* Links (si vols heretar color en components, canvia a "color: inherit") */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color var(--transition-fast);
}
a:hover, a:focus { color: var(--color-text); }

/* Focus: només visible amb teclat */
:where(a, button, input, select, textarea, [role="button"]):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 3px;
}

/* Accessibility */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ============================================================
   Global headings → map to t-h1..t-h4
   (manté Option A: sense marges per defecte)
   ============================================================ */

   :where(h1){
    font: var(--fw-semibold) var(--fs-h1)/var(--lh-tight) var(--font-display);
    letter-spacing: var(--ls-h1);
  }
  
  :where(h2){
    font: var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-display);
    letter-spacing: var(--ls-h2);
  }
  
  :where(h3){
    font: var(--fw-semibold) var(--fs-h3)/var(--lh-heading) var(--font-display);
    letter-spacing: var(--ls-h3);
  }
  
  :where(h4){
    font: var(--fw-semibold) var(--fs-h4)/var(--lh-heading) var(--font-display);
    letter-spacing: var(--ls-h4);
  }
  
  /* (opcional) si vols també h5/h6 coherents */
  :where(h5){
    font: var(--fw-semibold) var(--fs-body)/var(--lh-heading) var(--font-display);
    letter-spacing: var(--ls-h4);
  }
  
  :where(h6){
    font: var(--fw-semibold) var(--fs-body-sm)/var(--lh-heading) var(--font-display);
    letter-spacing: var(--ls-h4);
  }