/* ============================================================================
   TOKENS — Bar Moro
   ----------------------------------------------------------------------------
   Palette dal logo reale (loghi/logo.jpg): bordeaux, ocra, crema — vino,
   legno, terracotta. Direzione scelta: "Notte di putea" (site-loop/03).
   ========================================================================= */

:root {
  /* ——— COLORE ————————————————————————————————————————————————————————————
     Dal logo di Bar Moro. Contrasto AA verificato in site-loop/03-design-scelto.md:
     l'ocra (--accento-2) resta decorativo su fondo chiaro, porta testo solo
     su fondo scuro (4.75:1). */
  --fondo: #f3ecdf;
  --fondo-alt: #eae0cc;         /* superfici chiare, card, .u-nota */
  --fondo-scuro: #3a241c;       /* sezioni "notte" dell'alternanza */
  --fondo-scuro-alt: #4a2f22;   /* superfici dentro le sezioni notte */
  --testo: #2a1b14;
  --testo-tenue: #6b5847;
  --testo-su-scuro: #f3ecdf;
  --testo-tenue-su-scuro: #cbb59d;
  --accento: #8c2e29;           /* bordeaux — CTA, link, il colore che si ricorda */
  --accento-2: #c79a56;         /* ocra — decorativo; testo solo su --fondo-scuro */
  --su-accento: #f3ecdf;
  --bordo: color-mix(in srgb, var(--testo) 14%, transparent);

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Playfair Display + Karla, assegnati nel BRIEF. Riga Google Fonts in
     index.html deve combaciare. */
  --font-titoli: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-testo: 'Karla', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-piccolo: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem);
  --t-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 2rem);
  --t-h2: clamp(1.875rem, 1.5rem + 1.7vw, 3.25rem);
  --t-h1: clamp(2.75rem, 1.7rem + 4.5vw, 6rem);

  --interlinea: 1.65;
  --interlinea-titoli: 1.06;
  --spaziatura-titoli: -0.01em;

  /* ——— RESPIRO ————————————————————————————————————————————————————————————
     Alternato: valore ampio come base, le sezioni dense usano .u-sezione,
     le sezioni quasi vuote .u-sezione--fitta (utility già nel pavimento). */
  --spazio-sezione: clamp(5rem, 4rem + 7vw, 12rem);
  --spazio-blocco: clamp(1.5rem, 1rem + 2.2vw, 3.25rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

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

  /* ——— FORMA ——————————————————————————————————————————————————————————————
     Morbida: raggi generosi, superfici piene, nessun bordo — la separazione
     la fa il colore (crema/notte) o un'ombra calda, non una linea. */
  --raggio: 1.75rem;
  --raggio-interattivo: 999px;
  --bordo-spessore: 0px;
  --ombra: 0 24px 60px -28px rgba(42, 27, 20, 0.45);

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