/* Casa Edenrock — sistema di design.
   Questo foglio non sa nulla delle sezioni del sito: definisce colori,
   tipografia e mattoni riusabili. Le sezioni stanno in site.css. */

/* ---------- font ospitati localmente, variabili ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-var.woff2') format('woff2-variations');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- token ---------- */
:root {
  --crema:          #F7F2E7;
  --crema-chiaro:   #FDFBF6;
  --verde:          #3B5541;
  --verde-fondo:    #2A3C30;
  --verde-testo:    #EDEFE7;   /* testo su fondo verde */
  --verde-footer:   #9FB09B;   /* testo del footer */
  --terra:          #A65A37;
  --terra-scura:    #8C4A2D;   /* hover dei pulsanti */
  --ocra:           #D9A441;   /* solo decorazione: filetti, bordi. Mai testo */
  --ocra-testo:     #E4BF79;   /* kicker e accenti testuali su verde */
  --inchiostro:     #3A2E24;
  --inchiostro-2:   #6E5F51;

  --titolo: 'Fraunces', Georgia, serif;
  --testo:  'Work Sans', system-ui, sans-serif;

  --misura:   72rem;   /* larghezza massima del contenuto */
  --gutter:   clamp(1.25rem, 4vw, 3.5rem);
  --sezione:  clamp(3.5rem, 8vw, 7rem);

  --transizione: 240ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:not(.js) { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- tipografia ---------- */
h1, h2, h3 {
  font-family: var(--titolo);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 6vw, 4.4rem); font-weight: 300; letter-spacing: -.005em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p  { margin: 0 0 1.1em; max-width: 38rem; }
p:last-child { margin-bottom: 0; }

.kicker {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--terra);
  margin: 0 0 .8rem;
}
.filetto { width: 38px; height: 1px; background: var(--ocra); border: 0; margin: 1rem 0 1.4rem; }

/* ---------- mattoni ---------- */
.contenitore { max-width: var(--misura); margin-inline: auto; padding-inline: var(--gutter); }
.sezione { padding-block: var(--sezione); }
.sezione--chiara { background: var(--crema-chiaro); }
.sezione--verde  { background: var(--verde); color: var(--verde-testo); }
.sezione--verde h2 { color: var(--crema-chiaro); }
/* non --ocra: su verde l'ocra caldo sta a 3,64:1, sotto la soglia per il testo */
.sezione--verde .kicker { color: var(--ocra-testo); }

.btn {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .85rem 1.6rem;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transizione), color var(--transizione);
}
.btn-pieno { background: var(--terra); color: var(--crema-chiaro); }
.btn-pieno:hover { background: var(--terra-scura); }
.btn-vuoto { border-color: rgba(58, 46, 36, .35); color: var(--inchiostro); }
.btn-vuoto:hover { background: rgba(58, 46, 36, .06); }

/* ---------- accessibilità ---------- */
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.salta-al-contenuto {
  position: absolute; left: -9999px;
  background: var(--terra); color: var(--crema-chiaro);
  padding: .8rem 1.2rem; z-index: 100;
}
.salta-al-contenuto:focus { left: 1rem; top: 1rem; }

/* ---------- stato iniziale delle animazioni ----------
   Deliberatamente sotto `.js`: la classe la mette JavaScript come prima
   istruzione. Se GSAP non carica, o JS e' disattivato, questa regola non
   si applica mai e la pagina resta completa invece che vuota. */
.js .rivela { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rivela { opacity: 1; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}