/* =================================================================
   VARIABLES.CSS — Token unici del tema Boost4biz.
   Colori, pattern, tipografia, ritmo verticale, transizioni.
   Nessuna regola di layout: solo dichiarazioni di variabili.
   ================================================================= */

:root {

  /* ── Palette ───────────────────────────────────────────────
     Nero grafite · grigio neutro · bianco · accento ciano tecnico.
     Contrasti verificati AA (minimo rilevato 4.60:1).            */

  --graphite:      #14181D;  /* testo primario, CTA full-width  */
  --graphite-2:    #2A313A;  /* testo secondario                */
  --gray:          #5B6672;  /* testo terziario, label          */
  --gray-2:        #8A939D;  /* testo disattivato               */
  --paper:         #FFFFFF;
  --surface:       #F3F5F7;  /* sezioni alternate               */
  --line:          #E1E5E9;  /* bordi e separatori              */
  --line-2:        #C7CED4;  /* bordi di campo e pulsanti ghost */

  /* Accento ciano tecnico: unica saturazione del sistema */
  --accent:        #0A6C80;  /* 6.05:1 su bianco, 5.54:1 su surface */
  --accent-hover:  #07505F;
  --accent-soft:   #E4F1F4;  /* fondi tenui, hover di card      */
  --accent-line:   #9FC9D2;  /* bordini sottili                 */
  --accent-bright: #22D3EE;  /* solo su fondo grafite, 9.86:1   */

  --danger:        #A5342B;

  /* Colori su fondo scuro */
  --on-dark:       #FFFFFF;
  --on-dark-muted: #B8C1CA;

  /* ── Continuita col sito precedente ───────────────────────
     Il footer conserva il blu istituzionale del vecchio tema,
     lo stesso della dicitura sotto il marchio.                */

  --navy:          #1D3D6B;  /* blu istituzionale               */
  --navy-dark:     #0F2647;  /* fascia CTA                      */
  --navy-ink:      #FFFFFF;  /* 10.87:1 sul navy                */
  --navy-muted:    #B7C0CC;  /* 5.91:1 sul navy                 */
  --navy-line:     rgba(255, 255, 255, 0.16);

  /* Velatura del footer: due blu vicini, transizione impercettibile.
     Unica eccezione alla regola "nessun gradiente" del progetto.   */
  --navy-top:      #1E3D73;
  --navy-bottom:   #142A55;
  --navy-veil:     linear-gradient(180deg, var(--navy-top) 0%, var(--navy-bottom) 100%);

  /* Arancio del marchio (la "4" del logo).
     #F36C21 solo come campitura di pulsanti e segni grafici: come
     testo piccolo sul blu si ferma a 3.61:1. Per i link si usa la
     variante schiarita, che arriva a 4.79:1 sul navy.              */
  --orange:        #F36C21;
  --orange-hover:  #FF8A45;
  --orange-text:   #F79352;
  --orange-ink:    #0F2647;  /* testo sul pulsante arancio, 5.03:1 */

  /* ── Raggio ───────────────────────────────────────────────
     Un solo valore per tutti i controlli: pulsanti e campi.    */

  --radius: 6px;

  /* ── Tipografia ───────────────────────────────────────────
     Manrope per il testo, Space Grotesk per i numeri.
     Poppins resta come fallback self-hosted: interviene solo se
     il CDN non risponde, senza scaricare nulla in condizioni normali. */

  --font-sans: 'Manrope', 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-num:  'Space Grotesk', 'Manrope', 'Poppins', ui-monospace, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;

  /* Line-height stretto: 1.3–1.4 sui titoli, 1.55 sul corpo */
  --lh-tight:   1.08;
  --lh-title:   1.3;
  --lh-body:    1.55;

  /* Tracking ridotto */
  --tr-title:  -0.022em;
  --tr-hero:   -0.032em;
  --tr-label:   0.12em;

  --fw-body:   400;
  --fw-medium: 600;
  --fw-bold:   700;

  /* ── Spazio e ritmo ───────────────────────────────────────
     Il ritmo verticale non e costante: le sezioni alternano
     un passo 1.5x e un passo 2x per evitare la griglia
     perfettamente regolare tipica dell'output automatico.      */

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  --rhythm:      4rem;                        /* passo base      */
  --rhythm-1_5:  calc(var(--rhythm) * 1.5);   /* passo lungo     */
  --rhythm-2:    calc(var(--rhythm) * 2);     /* passo doppio    */

  /* Scarto orizzontale delle composizioni asimmetriche */
  --offset:      clamp(0rem, 4vw, 4.5rem);

  --wrap:     1140px;
  --header-h: 68px;

  /* ── Micro-interazioni ────────────────────────────────────
     150–200 ms, curva lineare-out. Nessun rimbalzo.            */

  --t-fast: 150ms;
  --t-base: 180ms;
  --t-slow: 200ms;
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ── Texture geometriche ──────────────────────────────────
     Solo CSS: nessuna immagine raster, nessun gradiente morbido.
     Griglia sottile per l'hero, linee verticali per il footer.  */

  --grid-size:  56px;
  --grid-color: rgba(10, 108, 128, 0.07);
  --grid-pattern:
    repeating-linear-gradient(to right,
      var(--grid-color) 0, var(--grid-color) 1px,
      transparent 1px, transparent var(--grid-size)),
    repeating-linear-gradient(to bottom,
      var(--grid-color) 0, var(--grid-color) 1px,
      transparent 1px, transparent var(--grid-size));

  /* Linee verticali del footer: sottili e appena percettibili */
  --rule-color: rgba(255, 255, 255, 0.045);
  --rule-step:  52px;
  --rule-pattern:
    repeating-linear-gradient(to right,
      var(--rule-color) 0, var(--rule-color) 1px,
      transparent 1px, transparent var(--rule-step));

  /* Separatore verticale tra blocchi affiancati */
  --divider: 1px solid var(--accent-line);
}

/* Su fondo scuro l'accento passa alla variante brillante:
   una sola dichiarazione, tutti i componenti la ereditano. */
.b4-on-dark {
  --accent: var(--accent-bright);
  --accent-hover: #67E8F9;
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.28);
}

@media (min-width: 768px) {
  :root {
    --fs-2xl: 2rem;
    --fs-3xl: 2.75rem;
    --fs-4xl: 4rem;
    --rhythm: 5rem;
  }
}