/* ==========================================================================
   tokens.css — variabili, font, reset, tipografia
   Variante: Chiaro · palette Radici del briefing
   Fondo bosco caldo, testo sabbia, accento albicocca. Non clinico: naturale.
   ========================================================================== */

/* ---- Font self-hosted (istanze statiche, no font variabili) ---- */
@font-face {
  font-family: 'Marcellus';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/marcellus-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/karla-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/karla-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/karla-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/karla-700.woff2') format('woff2');
}

:root {
  /* ---- fondali: la palette "Radici" del briefing ---- */
  --bg:       #F7F3E9;  /* sand */
  --bg-2:     #EFEBDD;  /* sezioni alternate */
  --bg-3:     #FDFBF6;  /* cream: card, form */
  --bg-4:     #DDE4D3;  /* sage-light */

  /* ---- testi ---- */
  --text:     #2C352A;  /* olive */
  --text-2:   #1F2720;  /* titoli */
  --dim:      #56604F;  /* secondario (AA su sand) */
  --dim-2:    #5D6655;  /* meta (AA anche sulle sezioni alternate) */

  /* ---- accenti ---- */
  --sage:     #A9BCA0;  /* solo bordi e decori, mai testo */
  --forest:   #43573F;
  --terra:    #9B5029;  /* il briefing avvisa: su sand serve la variante scura */
  --terra-hi: #85431F;  /* su chiaro l'hover va in profondità */
  --peach:    #C98B5C;
  --sky:      #5B7C8C;

  /* ---- ruoli semantici ---- */
  --btn-bg:       var(--forest);   /* il briefing vuole il bottone primario forest */
  --btn-fg:       #FDFBF6;         /* cream */
  --btn-bg-hover: var(--sage);     /* al passaggio schiarisce, non scurisce */
  --btn-fg-hover: #1F2720;         /* testo scuro sul salvia (contrasto 7,6:1) */
  --accent-soft:  var(--forest);   /* su chiaro il salvia non è leggibile */
  --logo-filter:  none;            /* il logo è già scuro: si lascia com'è */

  /* ---- ombre ---- */
  --shadow-lift: 0 14px 34px -12px rgb(44 53 42 / .3);

  /* ---- linee ---- */
  --line:     rgba(67, 87, 63, .28);
  --line-2:   rgba(44, 53, 42, .14);

  /* tipografia */
  --font-display: 'Marcellus', Georgia, serif;
  --font-body:    'Karla', system-ui, sans-serif;

  /* spazi */
  --space-xs: .5rem;  --space-s: 1rem;   --space-m: 2rem;
  --space-l:  4rem;   --space-xl: 6rem;

  /* forme: più morbide */
  --radius-pill: 999px;
  --radius-soft: 20px;
  --radius-lg:   28px;

  /* movimento */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease:     cubic-bezier(.16,1,.3,1);
  --dur-reveal: .65s;
  --dur-wipe: .8s;
  --dur-micro: .2s;

  /* layout */
  --content-max: 78rem;
  --pad: clamp(20px, 4vw, 72px);
  --nav-height: 4.25rem;
}

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

html {
  /* lo spazio della barra di scorrimento resta riservato anche quando lo
     scroll è fermo (overflow: hidden durante il caricamento e la pausa a fine
     video): senza, su Windows la pagina si allargava di 15px e saltava di lato */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
}
/* Lenis (solo desktop) gestisce lo scroll da sé */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, non hidden: hidden trasformerebbe il body in un contenitore di
     scroll, rompendo ScrollTrigger e la posizione fissa della nav */
  overflow-x: clip;
}

/* grana materica: dà consistenza al fondo scuro, mai in mezzo ai click */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* ---- Tipografia ---- */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-2);
  letter-spacing: -.01em;
}

h1 {
  font-size: clamp(38px, 8vw, 96px);
  line-height: 1.02;
}

h2 {
  font-size: clamp(28px, 5vw, 60px);
  line-height: 1.08;
}

h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.2;
  color: var(--text-2);
}

a { color: var(--terra); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--terra-hi); }

strong { font-weight: 700; color: var(--text-2); }
blockquote { font-family: var(--font-display); }

::selection { background: var(--terra); color: var(--bg); }

/* ---- Focus visibile ---- */
:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-s);
  z-index: 200;
  background: var(--terra);
  color: var(--bg);
  font-weight: 600;
  padding: .6em 1.2em;
  border-radius: 0 0 var(--radius-soft) var(--radius-soft);
  text-decoration: none;
}
.skip-link:focus-visible { top: 0; }

/* ---- Transizioni tra pagine ----
   In questa versione il passaggio da una pagina all'altra lo fa il sipario
   (components.css): la dissolvenza automatica del browser si sovrapporrebbe. */

/* ---- Utility ---- */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--wide { max-width: min(2000px, 96vw); }

/* eyebrow con filo a gradiente */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
  display: inline-flex;
  align-items: center;
  gap: .85em;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--terra), transparent);
  flex: none;
}

.lead { font-size: clamp(17px, 1.6vw, 21px); color: var(--dim); line-height: 1.6; }
.muted { color: var(--dim); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* barra di avanzamento lettura */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 120;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--terra), var(--sage));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

@media (min-width: 768px) {
  body { font-size: 17px; }
}

/* ---- prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .progress { display: none; }
}