/* ============================================================================
   TOKENS — Trattoria Nonna Tetti, piazzetta Regina Maria 17, Lecce
   ----------------------------------------------------------------------------
   Palette `giallo-segnale` e scala tipografica `compatto-tecnico`: copiate dal
   BRIEF così come sono. Nessun logo del locale è reperibile online (solo
   pagina Facebook e Instagram, senza marchio scaricabile), quindi la palette
   viene dalla direzione assegnata — vedi identita.json.

   Il giallo #ffd60a è una superficie, non un dettaglio: i pannelli manifesto
   sono gialli pieni, e l'alternanza bianco/giallo è il "respiro alternato".
   ========================================================================= */

:root {
  /* ——— COLORE — assegnati, non ricalcolati ——————————————————————————————— */
  --fondo: #ffffff;
  --fondo-alt: #ffd60a;
  --testo: #131313;
  --accento: #131313;
  --su-accento: #ffd60a;

  /* Derivati. #3a3a3a sta a 11,2:1 su bianco e 10,1:1 sul grigio chiaro. Era
     #525252 (7,4:1): dentro i minimi, ma il corpo del testo è quasi tutto qui
     dentro e a schermo si leggeva slavato — su una pagina che è per due terzi
     testo, "tecnicamente conforme" non basta. */
  --testo-tenue: #3a3a3a;
  --bordo: #e8e8e8;

  /* Sui due fondi scuri (pannello vini, piede) il corpo del testo NON è giallo.
     Il #ffd60a su nero misura 9,5:1 ma è saturo al massimo: a 14px produce
     alone e stanca l'occhio dopo due righe — visto a schermo. Il giallo resta
     ai titoli e agli occhielli, dove è grande e fa da accento; il testo che si
     legge davvero passa a questo bianco caldo (16,4:1 su #131313). */
  --su-scuro: #f4f1e8;

  /* Superficie neutra: --fondo-alt qui è il giallo pieno, quindi le card che
     devono restare quiete hanno bisogno di un grigio proprio. Forma morbida =
     la separazione la fa questo colore, non un bordo. */
  --superficie: #f3f3f3;

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Bodoni Moda + Inter (il <link> corrispondente è in testa a index.html).
     Scala `compatto-tecnico`: valori assegnati, copiati. */
  --font-titoli: 'Bodoni Moda', 'Didot', Georgia, serif;
  --font-testo: 'Inter', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(0.9375rem, 0.91rem + 0.14vw, 1.0625rem);
  /* Alzato da 13-14px a 14-15px: `--t-piccolo` non è una didascalia di
     servizio, in questa pagina porta il testo delle card menù, delle domande e
     della tabella orari. A 13px quel corpo si leggeva stretto. La scala
     assegnata (--t-corpo, --interlinea) resta intatta. */
  --t-piccolo: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --t-h4: clamp(1rem, 0.97rem + 0.18vw, 1.125rem);
  --t-h3: clamp(1.1875rem, 1.12rem + 0.35vw, 1.5rem);
  --t-h2: clamp(1.5rem, 1.35rem + 0.75vw, 2.125rem);
  --t-h1: clamp(2rem, 1.55rem + 2.2vw, 3.5rem);

  --interlinea: 1.5;
  --interlinea-titoli: 1.15;
  --spaziatura-titoli: -0.005em;

  /* Aggiunta, non sostituzione: l'impianto `manifesto` ha bisogno di una
     misura da affissione per i pannelli gialli. La scala compatto-tecnico
     sopra resta intatta e governa tutto il resto della pagina. */
  --t-manifesto: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem);
  --t-numero: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);

  /* ——— RESPIRO — `alternato` ——————————————————————————————————————————— */
  --spazio-sezione: clamp(5rem, 4rem + 7vw, 12rem);
  --spazio-blocco: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

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

  /* ——— FORMA — `morbida` ————————————————————————————————————————————————— */
  --raggio: 1.5rem;
  --raggio-piccolo: 0.875rem;
  --raggio-interattivo: 999px;
  --bordo-spessore: 0;
  --ombra: none;

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