/* ============================================================================
   TOKENS — Antonio Tarantino, Lecce
   ----------------------------------------------------------------------------
   Modalità `redesign`: la palette la comanda il marchio, non la direzione
   assegnata (`panna-terra`). Da dove viene, misurato e non dedotto:

     · fondo #0f0f0f  ← rgb(15,15,15), colore di fondo RENDERIZZATO del loro
       sito (riferimento/loro-comportamento.json)
     · testo #f5f2ec  ← rgb(245,245,245) renderizzato, scaldato di un soffio
       per accordarsi all'oro senza diventare panna
     · accento #c9a962 ← rgb(201,169,98), l'oro che il loro sito usa già negli
       occhielli, e soprattutto l'oro della fotografia ufficiale della loro
       linea prodotti: bottiglie nere su bokeh dorato. È il marchio che parla,
       non una terracotta mediterranea scelta a tavolino.

   Il logo è nero su bianco: in pagina va su una placca chiara, come fanno
   loro nell'header.
   ========================================================================= */

:root {
  /* ——— COLORE ————————————————————————————————————————————————————————————— */
  --fondo: #0f0f0f;
  --fondo-alt: #171512;        /* alternanza scura, appena scaldata */
  --testo: #f5f2ec;
  --testo-tenue: #a9a29a;      /* 8,4:1 su --fondo */
  --accento: #c9a962;          /* 8,5:1 su --fondo — ai TITOLI, mai al corpo */
  --su-accento: #1a1712;       /* inchiostro sul pulsante oro — 7,9:1 */
  --bordo: #2a2622;

  /* La pagina è scura di suo: `.su-scuro` resta allineata all'inchiostro
     corrente, così footer e pannelli che la usano non cambiano di tono. */
  --su-scuro: #f5f2ec;
  --su-scuro-tenue: #a9a29a;

  /* La sezione CHIARA che spezza il ritmo (il listino) ribalta questi tre in
     site.css con `.e-chiara`, esattamente come `.su-scuro` fa al contrario. */
  --chiaro-fondo: #f3efe7;
  --chiaro-testo: #1a1712;     /* 15,1:1 */
  --chiaro-tenue: #5c554b;     /* 6,4:1 */
  --chiaro-accento: #7a5615;   /* oro scurito per restare 5,3:1 sul chiaro */

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Epilogue è la famiglia assegnata e regge tutto il testo e l'interfaccia.
     Per i titoli resta Cormorant Garamond: è il font del loro sito ed è
     l'identità che il titolare riconosce: in `redesign` il marchio comanda.
     Motivato in DA-CONFERMARE.md. */
  --font-titoli: 'Cormorant Garamond', Georgia, serif;
  --font-testo: 'Epilogue', system-ui, sans-serif;

  /* Scala assegnata dal BRIEF: si copia, non si reinventa. */
  --t-corpo: clamp(1rem, 0.96rem + 0.28vw, 1.1875rem);
  --t-piccolo: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --t-h4: clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
  --t-h3: clamp(1.375rem, 1.25rem + 0.65vw, 1.875rem);
  --t-h2: clamp(1.75rem, 1.5rem + 1.3vw, 2.75rem);
  --t-h1: clamp(2.25rem, 1.65rem + 3vw, 4.25rem);

  --interlinea: 1.78;
  --interlinea-titoli: 1.22;
  --spaziatura-titoli: 0em;

  /* Il display serif sale oltre l'h2 solo dove il manifesto lo richiede. */
  --t-manifesto: clamp(2.5rem, 1.6rem + 4.4vw, 5.75rem);

  /* ——— RESPIRO ———————————————————————————————————————————————————————————
     Asse `alternato`: valore ampio, e le sezioni dense usano .u-sezione--fitta. */
  --spazio-sezione: clamp(5rem, 4rem + 7vw, 12rem);
  --spazio-blocco: clamp(1.5rem, 1rem + 2vw, 3rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

  --larghezza-max: 78rem;
  --larghezza-lettura: 38rem;

  /* ——— FORMA ——————————————————————————————————————————————————————————————
     Asse `morbida`: raggi generosi, nessun bordo, superfici piene. */
  --raggio: 1.5rem;
  --raggio-grande: 2.25rem;
  --raggio-interattivo: 999px;
  --bordo-spessore: 0;
  --ombra: 0 1.5rem 3.5rem rgb(0 0 0 / 0.45);

  /* ——— MOVIMENTO ——————————————————————————————————————————————————————— */
  --durata: 500ms;
  --durata-breve: 200ms;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}