/*
 * Colori del brand Genus Marche.
 * I valori vengono dal manuale e dai PNG ufficiali dei loghi: non si modificano.
 * Il vincolo di contrasto e' scritto qui perche' e' qui che si sbaglia.
 */

:root {
	--gm-verde: #007735;
	--gm-sabbia: #c69962;
	--gm-sabbia-chiara: #f5efe9;

	/* Colori dei tre Comuni, estratti dai pittogrammi ufficiali. */
	--gm-san-severino: #B4692A;
	--gm-cingoli: #005E93;
	--gm-filottrano: #8F372C;

	/*
	 * Colori ammessi per il testo.
	 * Su bianco: verde 5.7:1, Cingoli 6.9:1, Filottrano 7.6:1 — tutti conformi AA.
	 * Sabbia fa 2.6:1 e San Severino 4.2:1: nessuno dei due puo' fare da colore
	 * del testo. Usarli solo per bordi, fondini, icone e titoli grandi.
	 */
	--gm-testo: #1d1d1b;
	--gm-testo-tenue: #5a5a58;

	/* Verde piu' scuro per gli stati premuti e i passaggi del mouse. */
	--gm-verde-scuro: #005c29;

	/* Linee e bordi: sabbia molto smorzata, non grigio neutro. Un grigio freddo
	   accanto a una palette calda si nota, anche quando non si sa perche'. */
	--gm-linea: #e7ddd3;
	--gm-linea-tenue: #f1e9e1;

	/*
	 * Scala di spaziatura. Esiste per evitare i numeri sparsi: quando ogni margine
	 * e' scelto a occhio il ritmo verticale non torna mai, e nessuno capisce perche'.
	 * Rapporto costante di 1,5 a partire da 8.
	 */
	--gm-sp-1: 8px;
	--gm-sp-2: 12px;
	--gm-sp-3: 16px;
	--gm-sp-4: 24px;
	--gm-sp-5: 36px;
	--gm-sp-6: 56px;
	--gm-sp-7: 80px;

	--gm-raggio: 8px;
	--gm-raggio-piccolo: 4px;

	/*
	 * Ombre calde, non nere. Un'ombra grigia su un fondo sabbia sporca; questa
	 * prende il tono della terra e resta invisibile finche' non serve.
	 */
	--gm-ombra: 0 1px 2px rgb(93 66 40 / 6%), 0 8px 24px rgb(93 66 40 / 8%);
	--gm-ombra-tenue: 0 1px 2px rgb(93 66 40 / 5%);

	/*
	 * Curve di accelerazione. Le transizioni lineari sembrano meccaniche perche' in
	 * natura nulla parte e si ferma a velocita' costante: quello che entra rallenta
	 * arrivando, quello che esce accelera andandosene.
	 */
	--gm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--gm-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

body {
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--gm-testo);
}

/*
 * Scala tipografica.
 *
 * Vive qui e non nei Font globali di Elementor per una ragione precisa: i font
 * predefiniti di Elementor sono disattivati (Elementor > Impostazioni > Generale),
 * perche' caricavano Roboto e Roboto Slab dal CDN di Google a ogni visita. Spenti
 * quelli, la tipografia la governa il tema — cioe' questo file, che sta in git e si
 * rivede in una diff, invece che nei meta di un post del kit.
 *
 * Corpi da manuale: titolo 40/30, sottotitolo 24/20, testo 17/16, accento 15.
 * Il breakpoint 767px e' quello che usa Elementor per il mobile: tenerli allineati
 * evita che il tema e il costruttore si contraddicano a meta' schermo.
 */

:root {
	--gm-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
}

/*
 * I titoli in Poppins a corpo grande hanno un'aria leggermente sciolta: una
 * spaziatura negativa quasi impercettibile li compatta e li fa leggere come una
 * parola sola invece che come lettere affiancate. Sotto i 24px non serve piu'.
 */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--gm-font);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--gm-testo);
}

h3, h4, h5, h6 { letter-spacing: -0.005em; }

h1 { font-size: 40px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }

button,
input[type="submit"],
.elementor-button {
	font-family: var(--gm-font);
	font-size: 15px;
	font-weight: 600;
}

a {
	color: var(--gm-verde);
}

@media (max-width: 767px) {
	body { font-size: 16px; }
	h1 { font-size: 30px; }
	h2 { font-size: 20px; }
	h3 { font-size: 18px; }
	h4 { font-size: 17px; }
}