/* ==========================================================================
   Connecting Bz — design token
   Valori desktop presi dai prototipi in design-handoff/; scale tablet e phone
   da docs/02-responsive.md. Cambiare la scala tipografica si fa qui, non
   modulo per modulo nel Visual Builder.
   ========================================================================== */

:root {
	/* --- Colori ---------------------------------------------------------- */
	/*
	 * Palette chiara (dalla pagina pubblicitaria): fondi bianco/blu-grigio
	 * chiaro, testo scuro, rosso #e30613 e blu-grigio #6c8095 come primari.
	 * Contrasti verificati AA — testo piccolo ≥4.5:1, numeri/wordmark (grandi)
	 * ≥3:1.
	 */

	--cbz-bg:            #ffffff;  /* sezioni base */
	--cbz-bg-alt:        #eef2f6;  /* bande alternate, blu-grigio chiaro */
	--cbz-card:          #ffffff;  /* card e box (con ombra e bordo) */
	--cbz-footer:        #e9edf1;  /* footer chiaro */

	/* Rosso primario */
	--cbz-accent:        #e30613;  /* CTA, bullet, numeri giornata, "Bz" */
	--cbz-accent-soft:   #c8050f;  /* link (rosso leggermente più scuro: AA su bande) */
	--cbz-accent-light:  #a5040d;  /* hover link, testo rosso su fill chiaro */
	--cbz-accent-pale:   #a5040d;  /* testo del bottone "soft" */
	--cbz-accent-hover:  #a5040d;  /* fondo dei bottoni pieni in hover */
	--cbz-accent-deep:   #8f0410;  /* fine scura del gradiente avatar */

	/* Blu-grigio secondario */
	--cbz-secondary:      #6c8095; /* wordmark "Connecting" (testo grande) */
	--cbz-secondary-dark: #3d4c5d; /* kicker e label blu-grigio (testo piccolo, AA) */

	/* Bianco: testo SOPRA i fondi rossi/blu-grigio pieni (bottoni, blocchi). */
	--cbz-ink:           #ffffff;

	/* Cifre e titoli "display": scuri sul chiaro (prima erano bianchi sul nero). */
	--cbz-display:       #1f2830;

	--cbz-text:          #1f2830;  /* corpo e titoli */
	--cbz-text-strong:   #121920;
	--cbz-text-2:        #3a4650;  /* sottotitoli */
	--cbz-text-3:        #404d58;  /* descrizioni nelle card */
	--cbz-text-4:        #45525d;  /* testo minore, ruolo relatore */
	--cbz-text-nav:      #1f2830;  /* voci di menu */
	--cbz-text-list:     #1f2830;  /* elenco protagonisti */
	--cbz-muted:         #45525d;  /* label mono, credito footer */

	/* Bordi e velature: su fondo chiaro sono neri a bassa opacità. */
	--cbz-border:        rgba(31, 40, 48, 0.10);
	--cbz-border-strong: rgba(31, 40, 48, 0.16);
	--cbz-border-ghost:  rgba(31, 40, 48, 0.45);  /* bordo bottone ghost */
	--cbz-border-white:  rgba(31, 40, 48, 0.75);  /* bordo ghost in hover */
	--cbz-border-accent: rgba(227, 6, 19, 0.30);
	--cbz-border-accent-soft: rgba(227, 6, 19, 0.25);
	--cbz-fill-accent:   rgba(227, 6, 19, 0.08);   /* fondo badge/pill rosse */
	--cbz-fill-accent-2: rgba(227, 6, 19, 0.12);
	--cbz-fill-white:    rgba(31, 40, 48, 0.05);   /* velo grigio: pill lingua, campi */
	--cbz-fill-chip:     rgba(31, 40, 48, 0.04);
	--cbz-border-chip:   rgba(31, 40, 48, 0.10);
	--cbz-glow:          rgba(108, 128, 149, 0.28); /* alone blu-grigio (era il giallo) */
	--cbz-glow-soft:     rgba(108, 128, 149, 0.18);

	--cbz-nav-bg:        rgba(255, 255, 255, 0.85); /* header traslucido chiaro */

	/* Ombra morbida per staccare le card bianche sul fondo chiaro. */
	--cbz-shadow:        0 1px 2px rgba(31, 40, 48, 0.04), 0 6px 20px rgba(31, 40, 48, 0.06);

	/*
	 * Gradienti blu-grigio (ricostruiti in CSS al posto dei JPG: cambiabili da
	 * qui, indipendenti dalla risoluzione, nessun asset esterno). Il blocco
	 * macrotema porta testo bianco, quindi la tinta è scura abbastanza (≥4.5:1).
	 */
	--cbz-gradient-card: linear-gradient(150deg, #6c8095, #586a7d);
	--cbz-gradient-tema: linear-gradient(155deg, #586a7d, #485668);
	--cbz-gradient-avatar: linear-gradient(135deg, #e30613, #8f0410);

	/* Overlay hero: velo CHIARO (il testo hero è scuro su immagine chiara).
	   Orizzontale su desktop, verticale su phone — vedi @media in fondo. */
	--cbz-overlay-hero: linear-gradient(
		95deg,
		rgba(255, 255, 255, 0.92) 0%,
		rgba(255, 255, 255, 0.68) 46%,
		rgba(255, 255, 255, 0.15) 100%
	);

	/* --- Tipografia ------------------------------------------------------ */
	/* Inter Tight per titoli, cifre e corpo (unico font self-hosted).
	   I kicker/label restano monospaziati, ma con lo stack monospace di
	   sistema: nessun secondo font da scaricare o ospitare. */
	--cbz-font-display: 'Inter Tight', system-ui, sans-serif;
	--cbz-font-body:    'Inter Tight', system-ui, sans-serif;
	--cbz-font-mono:    ui-monospace, 'SF Mono', 'Menlo', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Consolas', monospace;

	--cbz-h1:            76px;
	--cbz-h1-ls:         -2.5px;
	--cbz-h2:            44px;
	--cbz-h2-ls:         -1px;
	--cbz-h2-col:        36px;
	--cbz-h2-col-ls:     -0.8px;
	--cbz-day-number:    120px;
	--cbz-day-number-ls: -4px;
	--cbz-day-name:      40px;
	--cbz-card-number:   44px;
	--cbz-tema:          26px;
	--cbz-card-title:    24px;
	--cbz-card-title-sm: 21px;
	--cbz-time:          26px;
	--cbz-stat:          64px;

	--cbz-hero-sub:      23px;
	--cbz-lead:          21px;
	--cbz-body:          19px;
	--cbz-body-sm:       17px;
	--cbz-kicker:        14px;
	--cbz-kicker-ls:     1.5px;

	/* --- Spaziature ------------------------------------------------------ */
	--cbz-section-y:     100px;
	--cbz-section-x:     40px;
	--cbz-hero-top:      130px;
	--cbz-hero-bottom:   140px;
	--cbz-card-pad:      32px;
	--cbz-gap:           20px;
	--cbz-gap-col:       64px;
	--cbz-gap-stats:     48px;
	--cbz-nav-y:         18px;
	--cbz-nav-x:         40px;

	--cbz-max:           1180px;  /* home */
	--cbz-max-narrow:    1080px;  /* pagina giornata */

	/* --- Forme ----------------------------------------------------------- */
	--cbz-radius-sm:     12px;
	--cbz-radius:        18px;
	--cbz-radius-lg:     22px;
	--cbz-radius-pill:   999px;

	/* --- Altezze immagine ------------------------------------------------ */
	--cbz-img-day-card:  150px;
	--cbz-img-day-hero:  340px;

	/* --- Timeline -------------------------------------------------------- */
	--cbz-time-col:      120px;
}

/* --- Laptop: solo respiro orizzontale, layout invariato ------------------ */
@media (max-width: 1199px) {
	:root {
		--cbz-section-x: 32px;
		--cbz-nav-x:     28px;
	}
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 980px) {
	:root {
		--cbz-h1:            52px;
		--cbz-h1-ls:         -1.6px;
		--cbz-h2:            34px;
		--cbz-h2-ls:         -0.7px;
		--cbz-h2-col:        30px;
		--cbz-h2-col-ls:     -0.6px;
		--cbz-day-number:    84px;
		--cbz-day-number-ls: -2.8px;
		--cbz-day-name:      32px;
		--cbz-card-number:   40px;
		--cbz-tema:          23px;
		--cbz-card-title:    22px;
		--cbz-card-title-sm: 20px;
		--cbz-time:          24px;
		--cbz-stat:          48px;

		--cbz-hero-sub:      20px;
		--cbz-lead:          19px;
		--cbz-body:          18px;
		--cbz-body-sm:       16px;
		--cbz-kicker:        13px;
		--cbz-kicker-ls:     1.3px;

		--cbz-section-y:     72px;
		--cbz-section-x:     28px;
		--cbz-hero-top:      96px;
		--cbz-hero-bottom:   104px;
		--cbz-card-pad:      26px;
		--cbz-gap:           18px;
		--cbz-gap-col:       40px;
		--cbz-gap-stats:     32px;

		--cbz-img-day-card:  140px;
		--cbz-img-day-hero:  260px;
		--cbz-time-col:      92px;
	}
}

/* --- Phone --------------------------------------------------------------- */
@media (max-width: 767px) {
	:root {
		--cbz-h1:            36px;
		--cbz-h1-ls:         -1px;
		--cbz-h2:            27px;
		--cbz-h2-ls:         -0.5px;
		--cbz-h2-col:        25px;
		--cbz-h2-col-ls:     -0.4px;
		--cbz-day-number:    60px;
		--cbz-day-number-ls: -2px;
		--cbz-day-name:      27px;
		--cbz-card-number:   36px;
		--cbz-tema:          21px;
		--cbz-card-title:    20px;
		--cbz-card-title-sm: 19px;
		--cbz-time:          22px;
		--cbz-stat:          40px;

		--cbz-hero-sub:      19px;
		--cbz-lead:          18px;
		--cbz-body:          17px;
		--cbz-body-sm:       16px;
		--cbz-kicker:        12px;
		--cbz-kicker-ls:     1.2px;

		--cbz-section-y:     56px;
		--cbz-section-x:     20px;
		--cbz-hero-top:      72px;
		--cbz-hero-bottom:   76px;
		--cbz-card-pad:      22px;
		--cbz-gap:           16px;
		--cbz-gap-stats:     24px;
		--cbz-nav-y:         14px;
		--cbz-nav-x:         20px;

		/* A colonna singola il testo occupa tutta la larghezza: un gradiente
		   orizzontale lo lascerebbe illeggibile sul bordo destro. */
		--cbz-overlay-hero: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.90) 0%,
			rgba(255, 255, 255, 0.72) 46%,
			rgba(255, 255, 255, 0.2) 100%
		);

		--cbz-img-day-card:  180px;
		--cbz-img-day-hero:  190px;
	}
}