/*!
 * Token del design system.
 *
 * Solo variabili, nessuna regola. I valori arrivano dal sito reale: la palette
 * di Kadence e il carattere Spartan gia' ospitato in locale, non da una scelta
 * fatta a tavolino.
 *
 * Sono definiti su :root perche' le variabili vanno ereditate, e il foglio
 * viene caricato soltanto sulle pagine che usano il template a codice.
 */

:root {
	/* Colori, dalla palette Kadence del sito */
	--ds-primario: #16a7ba;
	--ds-primario-scuro: #11818f;
	--ds-inchiostro: #000001;
	--ds-inchiostro-tenue: #4a4a4a;
	--ds-grigio: #a6a6a6;
	--ds-linea: #e2e2e2;
	--ds-linea-campo: #cbd5e0;
	--ds-linea-cornice: #dcdcdc;
	--ds-fondo: #ffffff;
	--ds-fondo-tenue: #f6f6f6;

	--ds-successo: #13612e;
	--ds-informazione: #1159af;
	--ds-errore: #b82105;
	--ds-attenzione: #f5a524;

	/* Tipografia */
	--ds-font: "Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Il carattere dei racconti di collezione, come sul sito. */
	--ds-font-narrativa: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--ds-corpo: 1rem;
	--ds-interlinea: 1.6;
	--ds-peso-normale: 400;
	--ds-peso-medio: 600;
	--ds-peso-forte: 700;

	--ds-testo-piccolo: 0.875rem;
	--ds-testo-grande: 1.125rem;
	--ds-testo-minuscolo: 0.75rem;
	/*
	 * Fluido come sul sito: 19,2 px fino a circa 1040, poi cresce con la
	 * finestra. Misurato sul live a 992, 1200, 1400 e 1539.
	 */
	--ds-titolo: clamp(1.2rem, 1.85vw, 2rem);
	--ds-sottotitolo: 1.75rem;

	/* Spaziature, scala di quattro */
	--ds-sp-1: 0.25rem;
	--ds-sp-2: 0.5rem;
	--ds-sp-3: 0.75rem;
	--ds-sp-4: 1rem;
	--ds-sp-6: 1.5rem;
	--ds-sp-8: 2rem;
	--ds-sp-12: 3rem;
	--ds-sp-16: 4rem;

	/* Forme */
	--ds-raggio: 8px;
	--ds-raggio-pieno: 999px;
	--ds-bordo: 1px solid var(--ds-linea);
	--ds-ombra: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.25);

	/* Misure */
	/* Come la riga Greenshift del sito: nessun tetto fisso, sempre il 90% della finestra. */
	--ds-larghezza: 90vw;
	/* La larghezza del contenuto del tema, usata dalle sezioni sotto la scheda. */
	--ds-contenuto: 1290px;
	--ds-margine-laterale: 20px;
	--ds-narrativa-larghezza: 900px;
	--ds-colonne-stacco: 60px;
	--ds-colonna-minima: 20rem;
	/* Il carosello delle illustrazioni, con i numeri dello slider del sito. */
	--ds-carosello-visibili: 5;
	--ds-carosello-stacco: 16px;
	--ds-miniature-visibili: 5;
	--ds-miniature-stacco: 15px;
	--ds-scheda-immagine: 250px;

	/* Altezza della galleria: valori e scalini copiati dallo slider del sito. */
	--ds-galleria-altezza: 570px;
	--ds-galleria-miniature: 100px;
}

/* Gli scalini della galleria, come li definisce lo slider del sito. */
@media (max-width: 991.98px) {
	:root {
		--ds-galleria-altezza: 450px;
		--ds-miniature-visibili: 4;
		--ds-miniature-stacco: 10px;
	}
}

@media (max-width: 767.98px) {
	:root {
		--ds-galleria-altezza: 400px;
	}
}

@media (max-width: 575.98px) {
	:root {
		--ds-galleria-altezza: 350px;
		/* Sul telefono il contenuto prende tutta la larghezza, come sul sito. */
		--ds-larghezza: 100%;
	}
}

/* Gli scalini del carosello: tre e poi due per volta, con piu' stacco. */
@media (max-width: 991.98px) {
	:root {
		--ds-carosello-visibili: 3;
		--ds-carosello-stacco: 20px;
	}
}

@media (max-width: 767.98px) {
	:root {
		--ds-carosello-visibili: 2;
		--ds-scheda-immagine: auto;
	}
}