/*
 * Tapparelle24h — variabili di design
 * Unica fonte di verità per colori, tipografia e spaziature.
 * Estratte da "Tapparelle24h Redesign v3.dc.html".
 * Nessun valore di stile va scritto altrove: se serve un valore nuovo, si aggiunge qui.
 */

:root {

  /* ---------------------------------------------------------------
   * COLORI — azione
   * L'arancio è riservato agli elementi cliccabili di contatto.
   * Mai su titoli, badge, icone decorative, numeri di sezione.
   * --------------------------------------------------------------- */
  --c-azione:            #C2410C;  /* su fondi chiari: chiamata, link, icone contatto */
  --c-azione-hover:      #9A3308;
  --c-azione-scuro:      #FF8A4C;  /* su fondi scuri: header, footer, barra fissa */
  --c-whatsapp:          #25D366;  /* solo il bottone WhatsApp */
  --c-whatsapp-testo:    #0B2E17;

  /* COLORI — struttura */
  --c-struttura:         #12212F;  /* header, footer, blocchi scuri */
  --c-struttura-alta:    #132433;  /* superficie rialzata dentro un blocco scuro */
  --c-struttura-bassa:   #0E1B27;  /* superficie incassata dentro un blocco scuro */
  --c-bordo-scuro:       #2E4459;
  --c-bordo-scuro-tenue: #21374A;

  /* COLORI — superficie */
  --c-fondo:             #FFFFFF;
  --c-fondo-alt:         #F4F5F7;  /* sezione alternata */
  --c-fondo-pagina:      #EEF0F3;  /* fondo fuori dal contenuto */
  --c-bordo:             #E3E6EA;
  --c-bordo-marcato:     #D5D9DF;
  --c-bordo-tratteggio:  #C3C9D1;

  /* COLORI — testo */
  --c-testo:             #1A1D21;
  --c-testo-medio:       #3C444E;  /* sottotitoli, testo introduttivo */
  --c-testo-tenue:       #56606B;  /* testo di servizio su fondo chiaro */
  --c-testo-etichetta:   #5A6572;  /* etichette maiuscole su fondo chiaro */
  --c-testo-inverso:     #FFFFFF;
  --c-testo-inverso-tenue: #93A2B3; /* testo di servizio su fondo scuro */
  --c-testo-inverso-etichetta: #8FA2B4;
  --c-testo-inverso-forte: #C7D1DC;

  /* COLORI — stato */
  --c-conferma:          #15803D;
  --c-conferma-fondo:    #F0FDF4;
  --c-conferma-bordo:    #BBF7D0;
  --c-errore:            #B91C1C;
  --c-errore-fondo:      #FEF2F2;
  /* Il rosso scuro su fondo blu notte sta a 2,1:1 e non si legge.
     Sui fondi scuri l'errore usa questo. */
  --c-errore-chiaro:     #FCA5A5;

  /* ---------------------------------------------------------------
   * TIPOGRAFIA
   * Archivo per titoli, numeri, etichette e pulsanti.
   * Manrope per il testo corrente.
   * --------------------------------------------------------------- */
  --font-titolo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-testo:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --peso-normale:   400;
  --peso-medio:     500;
  --peso-semi:      600;
  --peso-forte:     700;
  --peso-marcato:   800;
  --peso-massimo:   900;

  /* Corpi. Il minimo è 13px: nessun testo scende sotto.
     Il design v3 usa 10-11px per le etichette maiuscole: qui sono portate a 13px. */
  --t-etichetta:  13px;  /* maiuscoletto spaziato */
  --t-piccolo:    14px;  /* note, didascalie */
  --t-base:       16px;  /* testo corrente */
  --t-medio:      17px;  /* testo corrente su colonna larga */
  --t-grande:     19px;  /* occhiello, testo introduttivo */
  --t-h4:         22px;
  --t-h3:         26px;
  --t-h2:         32px;
  --t-h1:         46px;
  --t-display:    53px;  /* solo home */
  --t-numero:     30px;  /* numero di telefono nei blocchi di chiamata */

  /* Corpi su mobile: la gerarchia si comprime, il testo corrente no. */
  --t-h1-mobile:      37px;
  --t-h2-mobile:      26px;
  --t-h3-mobile:      22px;
  --t-display-mobile: 42px;

  --i-stretta:  0.95;  /* titoli grandi */
  --i-titolo:   1.15;
  --i-media:    1.4;   /* titoli piccoli, pulsanti */
  --i-testo:    1.7;   /* testo corrente */
  --i-larga:    1.85;  /* elenchi lunghi */

  --sp-titolo-grande: -0.035em;
  --sp-titolo:        -0.025em;
  --sp-titolo-lieve:  -0.015em;
  --sp-etichetta:      0.16em;

  /* Colonna di lettura. Era 64ch; dal 29/09/2026 il testo prende tutta la
     larghezza del suo contenitore (1240px al massimo), su richiesta. */
  --larghezza-testo:  100%;
  --larghezza-stretta: 44ch;

  /* ---------------------------------------------------------------
   * SPAZIATURE — scala a passi non lineari
   * --------------------------------------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  26px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 80px;
  --s-11: 120px;

  --gap-fitto:  var(--s-3);
  --gap:        var(--s-4);
  --gap-largo:  var(--s-5);

  /* Ritmo verticale delle sezioni */
  --sezione-y:        var(--s-10);
  --sezione-y-mobile: var(--s-8);

  /* ---------------------------------------------------------------
   * IMPAGINATO
   * --------------------------------------------------------------- */
  --contenuto-max:   1240px;
  --contenuto-pad:   var(--s-9);
  --contenuto-pad-mobile: var(--s-5);

  /* ---------------------------------------------------------------
   * FORME
   * --------------------------------------------------------------- */
  --r-piccolo:  7px;
  --r-base:    12px;
  --r-medio:   14px;
  --r-grande:  18px;
  --r-massimo: 22px;
  --r-cerchio: 50%;

  --bordo-citazione: 3px;  /* filetto a sinistra delle recensioni */

  --bordo:          1px solid var(--c-bordo);
  --bordo-marcato:  1.5px solid var(--c-bordo-marcato);
  --bordo-scuro:    1px solid var(--c-bordo-scuro);

  --ombra:       0 14px 36px rgba(18, 33, 47, 0.12);
  --ombra-alta:  0 18px 44px rgba(18, 33, 47, 0.14);

  /* ---------------------------------------------------------------
   * ELEMENTI DI CONTATTO
   * Sono la ragione per cui la gente arriva sul sito: hanno misure proprie.
   * L'area toccabile non scende mai sotto 48px.
   * --------------------------------------------------------------- */
  --tocco-min:        48px;
  --h-pulsante:       52px;
  --h-pulsante-alto:  60px;
  --h-chiamata:       90px;  /* blocco chiamata in testa alle landing */
  --h-barra-fissa:    64px;  /* barra di chiamata fissa in basso su mobile */
  --h-header:         56px;
  --h-campo:          56px;  /* campi del modulo: dito, non mouse */

  /* ---------------------------------------------------------------
   * PUNTI DI ROTTURA
   * Mobile first: queste servono nelle media query, non come valori.
   * --------------------------------------------------------------- */
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
}