/* ============================================================
   AESTHETICS 23 — DESIGN TOKEN (contratto anti-deriva, M33b)
   Fonte palette: 16_sito-web/06_richieste-cliente-kornelija.md
   (proposta Evomarketing confermata da Kornelija il 2026-07-01)
   Regola: ogni colore/font/spaziatura del CSS referenzia un token.
   Un valore nuovo si aggiunge PRIMA qui, poi si usa.
   ============================================================ */

/* ---- Font self-hostati (licenza OFL — confermati dal CEO 2026-08-07,
        sostituiscono Tenez/Halyard di Adobe Fonts non self-hostabili) ---- */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/font/fraunces-var-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../assets/font/figtree-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ---- Palette canonica (HEX confermati — non modificare) ---- */
  --sabbia-chiaro:   #F1E9DB;  /* sfondo dominante sezioni */
  --sabbia-medio:    #E4D7BF;  /* sezioni alternate, card */
  --sabbia-profondo: #D8C5A4;  /* bordi, divisori, dettagli */
  --verde:           #2E3D31;  /* PRIMARIO: titoli su sabbia, CTA, sezioni firma */
  --verde-2:         #1E2922;  /* hover, profondità, ombre */
  --inchiostro:      #2A2620;  /* corpo testo su fondi chiari */
  --crema:           #EDE3D2;  /* testo su fondi verdi */
  --bianco-caldo:    #FBF7F0;  /* card pulite, respiro */
  --oro:             #B89B6E;  /* SOLO accento: filetti, icone — mai testo lungo */
  --salvia:          #8A9A82;  /* SOLO accento decorativo — mai testo */

  /* ---- Ruoli (direzione "luminoso e arioso": fondi chiari dominanti,
          verde come firma e accento, MAI lunghe sezioni cupe) ---- */
  --fondo-pagina:    var(--bianco-caldo);
  --fondo-sezione:   var(--sabbia-chiaro);
  --fondo-alt:       var(--sabbia-medio);
  --fondo-firma:     var(--verde);        /* uso puntuale: CTA band, footer */
  --testo:           var(--inchiostro);
  --testo-su-firma:  var(--crema);
  --titoli:          var(--verde);
  --accento:         var(--oro);
  --bordo:           var(--sabbia-profondo);
  --cta-fondo:       var(--verde);
  --cta-testo:       var(--crema);
  --cta-fondo-hover: var(--verde-2);

  /* ---- Tipografia ----
     PROPOSTA self-hosted (da confermare col CEO — sostituisce Tenez/Halyard
     che vivono su Adobe Fonts, non self-hostabili):
     Fraunces (titoli, serif alto contrasto) · Figtree (corpo, sans umanista).
     I file font entrano in assets/font/ in Fase 3; qui fallback di sistema.
     REG-009: mai corsivi né font script. */
  --font-titoli:   "Fraunces", "Georgia", "Times New Roman", serif;
  --font-corpo:    "Figtree", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-occhielli: var(--font-corpo);

  /* Scala tipografica fluida (clamp: mobile → desktop) */
  --testo-xs:   clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --testo-sm:   clamp(0.9rem,  0.86rem + 0.2vw, 1rem);
  --testo-base: clamp(1rem,    0.95rem + 0.3vw, 1.125rem);
  --testo-md:   clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --testo-lg:   clamp(1.4rem,  1.2rem  + 1vw,   1.9rem);
  --testo-xl:   clamp(1.9rem,  1.5rem  + 2vw,   2.9rem);
  --testo-hero: clamp(2.4rem,  1.8rem  + 3.2vw, 4.2rem);

  --testo-display: clamp(2.6rem, 1.6rem + 5vw, 5.6rem);   /* titoli editoriali hero/manifesto */

  --peso-titoli: 480;           /* Fraunces regge pesi leggeri: eleganza ariosa */
  --peso-display: 360;          /* peso leggero per i titoli giganti */
  --peso-corpo: 400;
  --peso-forte: 600;
  --interlinea-titoli: 1.15;
  --interlinea-corpo: 1.65;
  --spaziatura-occhiello: 0.18em;  /* occhielli maiuscoli, tracking largo */

  /* ---- Spaziature (scala ariosa: sezioni che respirano) ---- */
  --spazio-xs: 0.5rem;
  --spazio-sm: 1rem;
  --spazio-md: 1.75rem;
  --spazio-lg: 3rem;
  --spazio-xl: clamp(4rem, 3rem + 4vw, 7rem);   /* padding verticale sezioni */
  --spazio-hero: clamp(5rem, 4rem + 6vw, 9rem);

  /* ---- Layout ---- */
  --larghezza-contenuto: 72rem;
  --larghezza-testo: 42rem;      /* colonne di lettura */

  /* ---- Sfumature (richiesta CEO 2026-08-07: "più sfumature in modo delicato" —
          gradienti tono-su-tono dentro la stessa famiglia, mai contrasti duri) ---- */
  --sfumatura-luce:   linear-gradient(180deg, var(--bianco-caldo) 0%, var(--sabbia-chiaro) 100%);
  --sfumatura-sabbia: linear-gradient(165deg, var(--sabbia-chiaro) 0%, var(--sabbia-medio) 100%);
  --sfumatura-alba:   linear-gradient(180deg, var(--sabbia-medio) 0%, var(--sabbia-chiaro) 45%, var(--bianco-caldo) 100%);
  --sfumatura-firma:  linear-gradient(170deg, var(--verde) 0%, var(--verde-2) 100%);
  --sfumatura-oro:    linear-gradient(90deg, transparent 0%, var(--oro) 50%, transparent 100%);  /* filetti che svaniscono */
  --alone-luce:       radial-gradient(70% 55% at 50% 0%, rgba(251, 247, 240, 0.85) 0%, rgba(251, 247, 240, 0) 100%);  /* alone morbido per gli hero */
  --velo-hero:        linear-gradient(100deg, rgba(30, 41, 34, 0.55) 0%, rgba(30, 41, 34, 0.25) 45%, rgba(30, 41, 34, 0.05) 75%);  /* leggibilità testo su foto */
  --fade-a-sabbia:    linear-gradient(to top, var(--sabbia-chiaro) 0%, rgba(241, 233, 219, 0) 7%);   /* filo di raccordo con la sezione dopo (ridotto: non deve mangiare il contrasto) */
  --velo-basso:       linear-gradient(to top, rgba(30, 41, 34, 0.62) 0%, rgba(30, 41, 34, 0.30) 32%, rgba(30, 41, 34, 0) 58%);  /* contrasto testi in basso nella hero */
  --velo-firma:       linear-gradient(170deg, rgba(46, 61, 49, 0.88) 0%, rgba(30, 41, 34, 0.94) 100%);  /* overlay verde su foto (CTA finale) */

  /* Filigrana KK per sfondi (file: assets/img/monogramma-kk.svg) */
  --filigrana-kk: url("../assets/img/monogramma-kk.svg");

  /* ---- Simboli (set icone mondo occhi — assets/img/icone.svg) ---- */
  --icona-colore: var(--verde);
  --icona-colore-accento: var(--oro);
  --icona-dimensione: 2.5rem;

  /* ---- Dettagli ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --ombra-morbida: 0 10px 40px rgba(46, 61, 49, 0.08);
  --ombra-card:    0 4px 18px rgba(42, 38, 32, 0.07);
  --filetto-oro: 1px solid var(--oro);
  --transizione: 220ms ease;
}