/* ============================================================================
   TOKENS — Ristorante Mediterraneo, Lecce
   ----------------------------------------------------------------------------
   Modalità `redesign` (voto di design 3): la palette la comanda il marchio.

   Il marchio un colore ce l'ha, e non è il default del tema: il petrolio
   rgb(0,132,164) misurato sul RENDERIZZATO del loro sito
   (riferimento/loro-comportamento.json) — intestazione fissa, tutti e quattro
   i pulsanti, i titoli, il pannello dei valori. Il logo è bianco/crema su
   trasparente, disegnato per stare su quel petrolio.

   L'unico ritocco è di contrasto: il loro petrolio con testo bianco sopra
   misura 4,26:1, sotto il minimo. Portato a #006d86 sale a 5,94:1.
   I neutri sono grigi virati al petrolio — freddi, non panna.

   Contrasti verificati (WCAG 2.1, sRGB):
     --testo su --fondo ......................... 15,7:1
     --testo-tenue su --fondo ....................  6,6:1
     --testo-tenue su --fondo-alt ................  5,9:1
     --accento su --fondo (titoli, link) .........  5,9:1
     --su-accento su --accento (pulsanti) ........  5,9:1
     --su-scuro su --fondo-scuro ................. 12,2:1
     --su-scuro-tenue su --fondo-scuro ...........  7,4:1
     --accento-chiaro su --fondo-scuro ...........  6,6:1
   ========================================================================= */

:root {
  /* ——— COLORE — dal marchio ——————————————————————————————————————————————— */
  --fondo: #ffffff;
  --fondo-alt: #eef5f7;
  --testo: #12262b;
  --testo-tenue: #4b6169;
  --accento: #006d86;
  --su-accento: #ffffff;
  --bordo: #d3e0e4;

  /* La superficie scura: il petrolio del marchio portato a fondo pieno.
     Ci vive il pannello "Come lavoriamo" (con la texture) e il piede. */
  --fondo-scuro: #06333f;
  --su-scuro: #eef6f8;
  --su-scuro-tenue: #a8c4cc;

  /* L'accento sopra la superficie scura: solo occhielli e titoli, mai corpo
     del testo. Un accento saturo usato come inchiostro passa il contrasto e
     resta illeggibile lo stesso. */
  --accento-chiaro: #4fc3dd;

  /* ——— TIPOGRAFIA — Syne + DM Sans, scala assegnata ————————————————————————
     La riga dei Google Fonts corrispondente sta nel <link> di index.html. */
  --font-titoli: 'Syne', system-ui, sans-serif;
  --font-testo: 'DM Sans', system-ui, sans-serif;

  --t-corpo:   clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-piccolo: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --t-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-h3:      clamp(1.375rem, 1.15rem + 1.1vw, 2.25rem);
  --t-h2:      clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
  --t-h1:      clamp(3.25rem, 1.5rem + 8vw, 9rem);

  --interlinea:          1.58;
  --interlinea-titoli:   0.95;
  --spaziatura-titoli:   -0.04em;

  /* ——— RESPIRO — ampio —————————————————————————————————————————————————— */
  --spazio-sezione: clamp(5rem, 4rem + 7vw, 12rem);
  --spazio-blocco: clamp(1.5rem, 1rem + 2vw, 3rem);
  --gronda: clamp(1.25rem, 4vw, 4rem);

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

  /* ——— FORMA — mista ———————————————————————————————————————————————————
     Contenitori a spigolo vivo, elementi interattivi a pillola. Il contrasto
     fra i due è il segno — ed è anche l'unica cosa che tengo dei loro
     pulsanti, che erano già a pillola. */
  --raggio: 0;
  --raggio-interattivo: 999px;
  --bordo-spessore: 1px;
  --ombra: none;

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