/* CBN Informatica (IT-Tech) - token del design e font, caricato su TUTTO il sito.
   Origine: design/proposte-2026-10-13/tokens.css + gli override della Home finale
   "lineare" (home-assemblata-finale-lineare.html), già fusi qui: i valori sotto sono
   quelli finali, non quelli intermedi dei mockup.

   Perché token propri (--cbn-*) e non --e-global-color-paletteN del Kit Elementor:
   il Kit è ancora la palette "Presidio di Fiducia" (teal/blu) usata dalle pagine
   interne; riscriverlo cambierebbe Chi siamo, Servizi, Contatti prima che siano
   riprogettate. Allineare il Kit a questa palette è un punto aperto (LEGGIMI.md). */

/* ---- Font ---------------------------------------------------------------
   Self-hosted (nessuna richiesta a terzi, GDPR). font-display:swap evita il
   testo invisibile; i due @font-face "Fallback" riducono lo spostamento di
   layout (CLS) allo scambio, perché Arial/Courier New vengono scalati alle
   proporzioni del font vero. I valori sono STIMATI sulle metriche pubbliche di
   Manrope (ascender 1,066 em, descender 0,30 em, larghezza media ~4% sopra
   Arial) e sul passo fisso di Plex Mono (0,6 em, uguale a Courier New): vanno
   ritoccati se Lighthouse segnala ancora CLS dai font. */
@font-face {
	font-family: "Manrope";
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial");
	size-adjust: 104%;
	ascent-override: 102.5%;
	descent-override: 28.8%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "IBM Plex Mono Fallback";
	src: local("Courier New");
	size-adjust: 100%;
	ascent-override: 102.5%;
	descent-override: 27.5%;
	line-gap-override: 0%;
}

:root {
	/* ---- Colore --------------------------------------------------------
	   Un solo scuro (charcoal) e un solo arancio di marca. I rapporti di
	   contrasto sono quelli verificati sui mockup:
	   - arancio #FF3C00 su charcoal 4,25:1 -> solo testo >= 24px, numeri, filetti,
	     accenti; mai testo piccolo (li' si usa il bianco)
	   - arancio scuro #C42E00: bianco 5,62:1, su paper 5,11:1, su paper-deep 4,60:1
	     -> bottoni, eyebrow e link su fondo chiaro */
	--cbn-orange: #FF3C00;
	--cbn-orange-strong: #C42E00;
	--cbn-orange-strong-hover: #A82700;
	--cbn-charcoal: #252628;
	--cbn-paper: #F6F4F0;
	--cbn-paper-deep: #ECE8E1;
	--cbn-white: #FFFFFF;
	--cbn-text: var(--cbn-charcoal);         /* 13,79:1 su paper */
	--cbn-text-muted: #4A4C51;               /* 7,04:1 su paper-deep */
	--cbn-on-dark: #FFFFFF;                  /* 15,15:1 su charcoal */
	--cbn-on-dark-muted: #B6B8BD;            /* 7,6:1 su charcoal */
	--cbn-line-on-light: rgba(37, 38, 40, .16);
	--cbn-line-on-dark: rgba(255, 255, 255, .18);
	/* righe della griglia di fondo: devono essere percepite, non lette */
	--cbn-grid-line-on-dark: rgba(255, 255, 255, .07);
	--cbn-grid-line-on-light: rgba(37, 38, 40, .08);
	/* superfici rialzate: solo bianco semitrasparente sul charcoal (nessun secondo colore di fondo) */
	--cbn-surface-raised: rgba(255, 255, 255, .04);
	--cbn-surface-raised-hover: rgba(255, 255, 255, .07);
	--cbn-surface-grid-on-light: rgba(255, 255, 255, .55);

	/* ---- Tipografia ------------------------------------------------------- */
	--cbn-font-body: "Manrope", "Manrope Fallback", system-ui, sans-serif;
	--cbn-font-display: var(--cbn-font-body);
	--cbn-font-label: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
	--cbn-size-display: clamp(2.625rem, 6.4vw, 6rem);
	--cbn-size-h2: clamp(2.125rem, 4.8vw, 4.25rem);
	/* H2: due livelli. Sezione = --cbn-size-h2 (68px); enfasi (CTA finale, affermazione
	   "Pochi progetti alla volta.") = --cbn-size-h2-emphasis (80px, un solo gradino sopra). */
	--cbn-size-h2-emphasis: clamp(2.5rem, 5.5vw, 5rem);
	/* H2 scesi a 24px su mobile: titoli lunghi (manifesto di servizio, titoli del documento
	   Privacy) a 26-28px andavano a 4-5 righe a 360px */
	--cbn-size-h2-long-min: 1.5rem;
	--cbn-size-h3: 1.5rem;
	/* H3: tre livelli invece di dodici valori sparsi (audit 2026-10-20).
	   feature = titoli-scheda e righe-elenco di primo piano (Home, Servizi, Chi siamo);
	   list = titoli di voce in elenchi/passi; base (--cbn-size-h3) = titolo in elenchi compatti. */
	--cbn-size-h3-feature: clamp(1.75rem, 3vw, 2.75rem);
	--cbn-size-h3-list: clamp(1.5rem, 2.4vw, 2.125rem);
	--cbn-size-lead: clamp(1.125rem, 1.5vw, 1.3125rem);
	--cbn-size-body: 1rem;
	--cbn-size-label: .8125rem;               /* 13px: etichette mono leggibili (a .75rem risultavano troppo piccole, review 2026-10-14) */
	--cbn-tracking-display: -.045em;
	--cbn-tracking-section: -.04em;
	--cbn-tracking-card: -.02em;

	/* ---- Spaziatura (griglia da 8px) ---------------------------------------- */
	--cbn-space-xs: 8px;
	--cbn-space-sm: 16px;
	--cbn-space-md: 24px;
	--cbn-space-lg: 40px;
	--cbn-space-xl: 64px;
	--cbn-space-2xl: 96px;
	--cbn-section-y: clamp(88px, 11vw, 176px);        /* sezione ampia */
	--cbn-section-y-tight: clamp(64px, 8vw, 120px);   /* sezione compressa: ritmo verticale variato */
	--cbn-gutter: clamp(20px, 4.2vw, 64px);
	/* ---- Scala di spazio della Home (audit 2026-10-16, docs/home-spazi-audit-2026-10-16.md) ----
	   Nomi propri: --cbn-section-y(-tight) restano invariati perche' le altre pagine (Chi siamo,
	   Servizi, Contatti) li usano e non devono spostarsi. Un solo passo verticale per tutte le
	   sezioni della Home (prima 5 valori diversi: 64/88/+24...). I minimi sono multipli di 8. */
	--cbn-section-pad: clamp(72px, 8.5vw, 128px);   /* padding alto/basso di ogni sezione */
	--cbn-head-gap: clamp(40px, 5vw, 72px);         /* intestazione -> contenuto (griglia, lista, riga CTA) */
	--cbn-grid-gap: clamp(32px, 4.5vw, 72px);       /* tra colonne di layout (testo / foto) e blocchi impilati */
	--cbn-card-gap: clamp(16px, 2.5vw, 32px);       /* tra schede e passi della stessa griglia */
	--cbn-hero-gap: clamp(32px, 4vw, 56px);         /* hero: copy -> controlli, e tra le barre quando e' in colonna */
	/* foto delle sezioni: file nativi 928px di larghezza (rapporto ~4:5), mai oltre; stessa
	   proporzione in colonna (affiancata) e una piu' bassa quando la foto e' a tutta larghezza */
	--cbn-media-max: 928px;
	--cbn-media-ratio-stack: 4 / 3;
	--cbn-container-max: 1312px;
	/* margine che allinea un elemento "a sbalzo" alla colonna del contenitore */
	--cbn-container-edge: max(var(--cbn-gutter), calc((100vw - var(--cbn-container-max)) / 2 + var(--cbn-gutter)));
	--cbn-header-height: 96px;
	/* area di tocco minima dei link piccoli (footer, breadcrumb): WCAG 2.5.5 / linee guida mobile */
	--cbn-touch-target: 44px;

	/* ---- Movimento: curva d'uscita rapida, durata breve ---------------------- */
	--cbn-ease-ui: cubic-bezier(.2, .7, .2, 1);
	--cbn-dur-ui: .18s;
}

/* Sostituisce Rubik (body) e Fira Sans (titoli) del tema padre su tutto il sito.
   Specificità pari al padre (assets/css/theme-default.css: "body", "h1..h6"), vince
   perche' questo foglio e' accodato dopo; le pagine interne mantengono pesi e
   dimensioni del padre, cambia solo la famiglia. Il padre dichiara altri font
   (Poppins, Muli, Roboto...) su singoli widget: quelli restano, si correggono
   quando la pagina viene riprogettata. */
body,
button,
input,
select,
textarea {
	font-family: var(--cbn-font-body);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--cbn-font-display);
}