/* ============================================
   GLOBAL — assets/css/global.css
   Token CSS, reset, tipografia base, accessibilità.
   Va incluso PRIMA di tutti gli altri CSS.
   ============================================ */

/* ── Token ── */
:root {
  --s0: #faf6ef;
  --s1: #f2e8d9;
  --s2: #dfc9a8;
  --s3: #b8966a;
  --s4: #8a6840;
  --s5: #5c3f1e;
  --s6: #2e1e0a;
  --au: #c49a2e;
  --au2: #e0bc60;
  --wh: #ffffff;
  --ff: 'Cormorant Garamond', Georgia, serif;
  --fb: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mw: 1100px;
  --nh: 68px;
  /* Focus ring — WCAG 2.4.11 */
  --focus-ring: 0 0 0 3px rgba(196,154,46,.6);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
img, video { max-width: 100%; display: block; }

/* ── Base ── */
body {
  background: var(--s0);
  color: var(--s6);
  font-family: var(--fb);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
}

/* ── WCAG 2.4.7 — Focus visibile su TUTTI gli elementi interattivi ── */
:focus-visible {
  outline: 3px solid var(--au);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Rimuovi outline solo se focus-visible è supportato (no mouse) */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── WCAG 2.3.3 — Nessuna animazione per chi la disabilita ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

/* ── WCAG 1.4.4 — Testo scalabile ── */
html { font-size: 100%; }

/* ── WCAG 2.4.1 — Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--s5);
  color: var(--s0);
  padding: .6rem 1.4rem;
  border-radius: 0 0 8px 8px;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── WCAG 1.3.1 — Screen reader only ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Utility ── */
hr.div { border: none; border-top: 1px solid var(--s1); }