/* ============================================================================
   TOKENS — House Ristorante Pizzeria, Torre Squillace (Nardò)
   ----------------------------------------------------------------------------
   Modalità `redesign`: la palette la comanda il marchio.
   I tre colori sono quelli dichiarati dal loro sito in
   wp-content/uploads/elementor/css/post-6.css:
     --e-global-color-primary   #CC9C62  oro
     --e-global-color-secondary #095267  verde-petrolio (fondo dell'header)
     --e-global-color-accent    #F5F1E9  crema (il logo e i titoli in apertura)
   Il quarto, --e-global-color-text #7A7A7A, è stato SCARTATO: sul loro bianco
   misura 4,29:1 e finisce in `sotto_soglia` (riferimento/loro-comportamento.json).

   Sull'oro: #CC9C62 sul crema fa 2,19:1 — sul loro sito è il colore di tutti i
   titoli di sezione e dei pulsanti, ed è la ragione delle sei violazioni
   misurate. Qui l'oro non fa mai da inchiostro sul chiaro: campiture, filetti,
   numeri di sezione, e testo grande solo sopra il verde-petrolio (3,52:1).
   ========================================================================= */

:root {
  /* ——— COLORE ———————————————————————————————————————————————————————————— */
  --fondo: #f5f1e9;            /* crema del marchio */
  --fondo-alt: #ebe4d6;        /* seconda superficie chiara */
  --testo: #0e2229;            /* nero-petrolio — 14,6:1 sul crema */
  --testo-tenue: #4a5a5e;      /* 6,4:1 sul crema */
  --accento: #095267;          /* verde-petrolio del marchio — 7,7:1 sul crema */
  --su-accento: #f5f1e9;       /* crema sopra il petrolio — 7,7:1 */
  --bordo: #d8cfbd;

  /* Sezioni a fondo petrolio (.su-scuro): crema 7,7:1, crema tenue 5,1:1. */
  --su-scuro: #f5f1e9;
  --su-scuro-tenue: #b9c8cd;

  /* L'oro del marchio, in due tagli.
     --oro          campiture, filetti, numeri, e titoli grandi sul petrolio
     --oro-chiaro   etichette piccole sul petrolio (4,6:1, sopra soglia) */
  --oro: #cc9c62;
  --oro-chiaro: #e0b579;

  /* ——— TIPOGRAFIA ————————————————————————————————————————————————————————
     Syne + DM Sans (assegnate). Il <link> corrispondente è in index.html. */
  --font-titoli: 'Syne', 'Syne Fallback', sans-serif;
  --font-testo: 'DM Sans', 'DM Sans Fallback', sans-serif;

  --t-corpo: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --t-piccolo: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
  --t-h4: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --t-h3: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --t-h2: clamp(2.125rem, 1.7rem + 2vw, 3.25rem);
  --t-h1: clamp(3rem, 1.9rem + 5vw, 6.5rem);

  --interlinea: 1.62;
  --interlinea-titoli: 0.92;
  --spaziatura-titoli: -0.03em;

  /* ——— 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: 78rem;
  --larghezza-lettura: 34rem;

  /* ——— FORMA — mista ————————————————————————————————————————————————————— */
  --raggio: 0;
  --raggio-interattivo: 999px;
  --bordo-spessore: 1px;
  --ombra: none;

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