/* ============================================================================
   TOKENS — Centro Veterinario Lupiae (Lecce)
   ----------------------------------------------------------------------------
   Palette derivata dal logo ufficiale (croce blu, nero, bianco): il blu è
   stato approfondito e desaturato rispetto al blu acceso del badge per una
   resa editoriale da centro specialistico, non da insegna. Impianto
   editoriale, apertura split-asimmetrico, movimento riservato, respiro
   ampio, forma mista — assi assegnati nel BRIEF.
   ========================================================================= */

:root {
  /* ——— COLORE — dal logo ufficiale ————————————————————————————————————— */
  --fondo: #fbfaf7;            /* carta calda, non bianco clinico */
  --fondo-alt: #eef2f6;        /* sezioni alternate: grigio-blu tenue */
  --testo: #14181c;
  --testo-tenue: #475569;      /* didascalie, metadati — mai testo corrente */
  --accento: #175a9c;          /* blu del logo, approfondito in chiave editoriale */
  --accento-scuro: #0f3f70;    /* hover/active su --accento */
  --su-accento: #ffffff;
  --bordo: #dde3e9;

  /* ——— TIPOGRAFIA — assegnata nel BRIEF —————————————————————————————————— */
  --font-titoli: 'Chivo', system-ui, -apple-system, sans-serif;
  --font-testo: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  --t-corpo: clamp(1rem, 0.96rem + 0.2vw, 1.1875rem);
  --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.5rem, 1.3rem + 0.9vw, 2.125rem);
  --t-h2: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --t-h1: clamp(2.75rem, 1.8rem + 4.5vw, 6rem);

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

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

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

  /* ——— FORMA — mista: contenitori squadrati, interattivi a pillola ——————— */
  --raggio: 0;
  --raggio-interattivo: 999px;
  --bordo-spessore: 1px;
  --ombra: 0 30px 60px -30px rgba(15, 26, 41, 0.28);

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