/* chalco · design token del sito (prova di conversione, 18 ottobre 2026)
   valori misurati sulle pagine in /html a 1440 px di larghezza.
   regola di marca: solo i quattro colori istituzionali, bianco, nero e grigi neutri. testi in minuscolo. */

:root {
  /* colori istituzionali */
  --c-yellow: #E3A649;
  --c-red:    #E94F37;
  --c-blue:   #003376;
  --c-black:  #0E0E10;
  --c-white:  #FFFFFF;

  /* schiariti (corpo dei riquadri) */
  --c-yellow-light: #F9EDDB;
  --c-red-light:    #FCE6E3;
  --c-blue-light:   #E3E9F0;
  --c-black-light:  #F2F2F3;

  /* neutri */
  --c-paper:     #FBFAF8;   /* fondo del sito chalco (bianco ottico, scelta 1.2) */
  --c-ink:       #0E0E10;   /* testo principale */
  --c-ink-2:     #4A4A52;   /* testo corrente */
  --c-ink-3:     #6B6A70;   /* didascalie */
  --c-line:      rgba(14,14,16,.35);  /* righe interne ai riquadri */
  --c-photo-bg:  #F1EFEA;   /* fondo dietro le foto scontornate */

  /* C-Factory (fondo nero, scelta 6.1) */
  --cs-bg:       #0E0E10;
  --cs-ink:      #F4F3EF;
  --cs-ink-2:    #C9C8C3;
  --cs-ink-3:    #B9B8B3;
  --cs-line:     rgba(255,255,255,.22);
  --cs-frame:    rgba(255,255,255,.6);

  /* griglia di fondo (svg in /design-system/griglia) */
  --grid-light-thin:  rgba(14,14,16,.17);   /* 1 px */
  --grid-light-main:  rgba(14,14,16,.32);   /* 1.4 px */
  --grid-dark-thin:   rgba(128,128,134,.30);
  --grid-dark-main:   rgba(128,128,134,.55);

  /* tipografia */
  --font-sans: "Montserrat", "Proxima Nova", sans-serif;   /* 400 500 600 700 800 */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;   /* 400 500 600 700 · solo per i dati: testi delle infografiche (8-13 px, numeri grandi 24-26 px)
                                                              e valori a destra nelle righe dei riquadri dati (11 px, 400). mai titoli, testi, menu, pulsanti */

  --fs-hero:      68px;  /* h1 home · 800 · -0.04em · lh 1.0 */
  --fs-hero-cs:   81px;  /* h1 C-Factory */
  --fs-section:   81px;  /* h2 di sezione · 800 · -0.04em · lh 1.0 */
  --fs-info:      56px;  /* h3 sopra le infografiche · 800 · -0.045em · lh .98 */
  --fs-card-l:    32px;  /* titolo riquadro servizi */
  --fs-card:      20px;  /* titolo riquadro · 800 · -0.04em */
  --fs-body:      17px;  /* testo corrente · 400 · lh 1.75 */
  --fs-body-s:    14px;  /* testo nei riquadri · lh 1.65 */
  --fs-nav:       11px;  /* menu · 600 · 0.22em · maiuscolo */
  --fs-btn:       11px;  /* pulsanti · 600 · 0.2em · maiuscolo */
  --fs-label:     10px;  /* etichette e testate riquadri · 600-700 · 0.24-0.26em · maiuscolo */
  --fs-tag:       9px;   /* tag nei riquadri servizi · 500 · 0.14em · maiuscolo */

  --ls-display: -0.04em;
  --ls-label:   0.24em;

  /* griglia di pagina */
  --container: 1440px;
  --gutter-x: 96px;        /* margini laterali */
  --cols: 12;
  --col-gap: 24px;         /* a 1440: colonne da 82 px */
  --section-overlap: -110px;  /* le sezioni si sovrappongono di 110 px; contenuto a +120 px */

  /* riquadri */
  --box-border: 1px solid var(--c-black);
  --box-head-h: 44px;
  --box-head-pad: 0 22px;
  --box-shadow-offset: 6px;   /* spessore pieno: 6px 6px 0 <colore del riquadro> */
  --row-pad: 20px 24px;

  /* foto */
  --photo-border: 1px solid var(--c-black);
  --photo-outline: 1px dashed rgba(14,14,16,.55);
  --photo-outline-offset: 8px;

  /* header */
  --header-h: 99px;
  --header-bg: rgba(251,250,248,.92);
}