/* ==========================================================================
   Fontana delle Grotte — Design tokens
   Unico punto di verita' del design system. Nessun valore estetico
   (colore, dimensione, spazio) va scritto altrove: sempre via var().
   ========================================================================== */

:root {

  /* ---------- Colore ---------------------------------------------------- */

  /* Inchiostri — testi e superfici scure.
     Contrasto su bianco: ink 16.9:1 · ink-2 10.6:1 · ink-3 5.1:1 → tutti AA. */
  --c-ink:        #1b1b1b;   /* titoli, testo forte */
  --c-ink-2:      #4a4a4a;   /* corpo testo */
  --c-ink-3:      #6e6e6e;   /* meta, didascalie. Non scendere sotto: sotto 4.5:1 */

  /* Oro — accento tipografico. Seconda parola dei titoli, dettagli, hairline.
     Non usarlo per grandi campiture: perde valore e vira al giallo.
     ATTENZIONE CONTRASTO: --c-gold su bianco fa 3.1:1 → ammesso SOLO su testo
     grande (>=24px). Per testo piccolo usare sempre --c-gold-dark (4.9:1). */
  --c-gold:       #b48a5e;
  --c-gold-dark:  #93693c;   /* obbligatorio per label, meta, link piccoli */
  --c-gold-soft:  #e8dccd;   /* bordi e separatori, mai testo */

  /* Oro per testo su FOTOGRAFIA scura (occhielli di hero e testate).
     Serve un terzo oro perche' --c-gold ha una luminanza di mezzo: su una foto
     velata resta troppo vicino allo sfondo. Misurato sulle foto in uso:
     --c-gold richiederebbe un velo al 75% per arrivare a 4.5:1, e a quel punto
     la fotografia non si vede piu'; questo ci arriva gia' al 42%. */
  --c-gold-light: #e0c49c;

  /* Vino — colore d'azione. Bottoni primari e stati attivi. */
  --c-wine:       #9b2226;
  --c-wine-dark:  #7d181c;   /* hover */
  --c-wine-deep:  #401419;   /* fondali scuri, footer alternativo */

  /* Salvia — fondo delle sezioni alternate. Stacca dal bianco senza urlare. */
  --c-sage:       #edf3ed;
  --c-sage-deep:  #d9e4d9;   /* bordi e texture dentro le sezioni salvia */

  /* I tre vini — presi dalle fasce "cielo notturno" delle etichette reali.
     Servono a distinguere le schede senza inventare nulla: il colore di
     ogni vino e' gia' deciso da chi ha disegnato l'etichetta. */
  --c-costellazione: #8f2b3a;   /* rosso — bordeaux della fascia */
  --c-machia:        #b8925e;   /* bianco — oro/tabacco, coincide con l'oro */
  --c-anni:          #c2637c;   /* rosato — rosa antico */

  /* Neutri caldi */
  --c-white:      #ffffff;
  --c-mist:       #f6f6f4;   /* fondo footer, fondo immagini prodotto */
  --c-line:       #e7e5e0;   /* bordo standard di card e tabelle */

  /* Semantici — riferirsi a questi nei componenti, non ai colori grezzi */
  --c-bg:            var(--c-white);
  --c-bg-alt:        var(--c-sage);
  --c-text:          var(--c-ink-2);
  --c-heading:       var(--c-ink);
  --c-accent:        var(--c-gold);
  --c-action:        var(--c-wine);
  --c-border:        var(--c-line);

  /* ---------- Tipografia ------------------------------------------------ */

  /* Cormorant Garamond: display. Alta eleganza, ottima da 24px in su.
     Sotto i 20px diventa fragile: da li' in giu' si usa il sans. */
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  /* Jost: interfaccia e corpo testo. Geometrico, neutro, molto leggibile. */
  --f-ui: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Scala tipografica — fluida, si adatta alla viewport senza media query.
     Rapporto ~1.25 (quarta maggiore) sul mobile, ~1.33 sul desktop. */
  --t-hero:    clamp(2.75rem, 1.5rem + 5vw,   5rem);      /*  44 →  80 */
  --t-h1:      clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);    /*  36 →  56 */
  --t-h2:      clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);    /*  28 →  40 */
  --t-h3:      clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); /*  20 →  26 */
  --t-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);   /*  17 →  20 */
  --t-body:    1rem;                                       /*  16 */
  --t-small:   0.875rem;                                   /*  14 */
  --t-micro:   0.75rem;                                    /*  12 */

  /* Pesi — Cormorant vive sui pesi leggeri, Jost sui medi */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;

  /* Interlinea */
  --lh-tight:  1.1;   /* display e titoli grandi */
  --lh-snug:   1.3;   /* titoli piccoli */
  --lh-body:   1.7;   /* corpo testo: generosa, il sito respira */

  /* Spaziatura lettere — il template vive di maiuscoletto spaziato */
  --ls-hero:   0.02em;
  --ls-title:  0.06em;
  --ls-label:  0.16em;  /* etichette maiuscole, voci di menu, bottoni */
  --ls-body:   0;

  /* ---------- Spazio ---------------------------------------------------- */

  /* Scala su base 4px. Usare solo questi valori: niente margini a caso. */
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */
  --s-9:  6rem;      /* 96 */
  --s-10: 8rem;      /* 128 */

  /* Respiro verticale delle sezioni — la leva principale dell'eleganza.
     Con pochi testi, e' questo a fare la differenza tra "povero" e "curato". */
  --s-section: clamp(4rem, 2rem + 8vw, 7.5rem);

  /* ---------- Layout ---------------------------------------------------- */

  --w-container: 1200px;   /* contenuto standard */
  --w-narrow:    720px;    /* blocchi di testo: mai righe piu' lunghe di ~75ch */
  --w-wide:      1440px;   /* gallerie e fasce quasi a tutta larghezza */
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Forma ----------------------------------------------------- */

  /* Il template ha angoli vivi: e' la sua firma. Restiamo squadrati. */
  --r-none: 0;
  --r-xs:   2px;   /* bottoni, badge */
  --r-sm:   3px;

  --bw:     1px;   /* spessore bordo standard */

  /* ---------- Elevazione ------------------------------------------------ */

  /* Ombre appena accennate: la profondita' la danno i bordi sottili. */
  --sh-none:  none;
  --sh-card:  0 1px 2px rgba(27, 27, 27, 0.04);
  --sh-hover: 0 14px 34px rgba(27, 27, 27, 0.09);
  --sh-band:  0 2px 24px rgba(27, 27, 27, 0.12);

  /* ---------- Movimento ------------------------------------------------- */

  --e-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --d-fast: 160ms;
  --d-base: 280ms;
  --d-slow: 520ms;   /* zoom immagini, dissolvenze di sezione */

  /* ---------- Livelli --------------------------------------------------- */

  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   900;
}

/* Chi preferisce meno movimento non lo subisce. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
  }
}