@import url(https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap);
/**
 * Fondamenta del redesign — token e baseline.
 *
 * Risorsa condivisa: la caricano i layout Frontend e UserPanel, non il
 * layout radice, così l'AdminPanel resta fuori dal redesign.
 *
 * Ordine di cascata atteso: temi vendor (stack `vendor-styles`) → questo
 * foglio e ags-components.css → chrome (header, footer) → CSS di pagina.
 * I temi vendor stanno prima perché devono perdere contro i token a
 * parità di specificità.
 *
 * Font: "Public Sans" era importata solo dentro il tema (style.css). La
 * richiamiamo qui perché è già la font in uso in tutto il sito e deve
 * sopravvivere alla rimozione del tema.
 */

:root
{
	/* Colore */
	--ags-forest:  #1f5138;
	--ags-green:   #3f7a58;
	--ags-moss:    #7f9b73;
	--ags-sand:    #f5f2eb;
	--ags-cream:   #fbfaf7;
	--ags-ink:     #20312a;
	--ags-muted:   #647068;
	--ags-border:  #d9dfd7;
	--ags-danger:  #b42318;
	--ags-white:   #ffffff;

	/* Superfici tenui per chip, alert e stati: testo forest/danger sopra resta AA */
	--ags-green-soft:  #e8efeb;
	--ags-danger-soft: #f8e9e8;

	/* Tipografia */
	--ags-font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Spaziatura (scala 4/8px) */
	--ags-space-1: 8px;
	--ags-space-2: 12px;
	--ags-space-3: 16px;
	--ags-space-4: 24px;
	--ags-space-5: 32px;
	--ags-space-6: 48px;
	--ags-space-7: 64px;
	--ags-space-8: 96px;

	/* Bordi e ombre */
	--ags-radius-container: 12px;
	--ags-radius-control:   8px;
	--ags-shadow-soft:      0 2px 10px -2px rgba(32, 49, 42, 0.12);
}

/** BASELINE **/

body
{
	background:  var(--ags-cream);
	color:       var(--ags-ink);
	font-family: var(--ags-font);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6
{
	color:           var(--ags-ink);
	font-family:     var(--ags-font);
	font-weight:     700;
	letter-spacing:  -0.01em;
	line-height:     1.25;
	text-transform:  none;
}

p
{
	line-height: 1.6;
}

a
{
	color: var(--ags-forest);
}

a:hover
{
	color: var(--ags-green);
}

hr
{
	border-color: var(--ags-border);
}

/** STATI DI FOCUS — tastiera **/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-select:focus-visible,
[tabindex]:focus-visible
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

/** CONTROLLI DI FORM **/

input,
select,
textarea,
.form-control,
.form-select
{
	background:      var(--ags-white);
	border:          1px solid var(--ags-border);
	border-radius:   var(--ags-radius-control);
	color:           var(--ags-ink);
	font-family:     var(--ags-font);
	min-height:      44px;
}

textarea
{
	min-height: 96px;
}

/* Checkbox, radio e interruttori hanno la geometria di Bootstrap: l'altezza minima dei
   campi di testo li stirava in verticale (l'interruttore diventava un ovale). */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="color"]
{
	min-height: 0;
}

/* Da spenti checkbox e interruttori avevano il bordo grigio chiaro di Bootstrap: sul bianco
   non arrivava al contrasto 3:1 richiesto per i controlli e il riquadro quasi spariva. */
.form-check-input:not(:checked)
{
	border-color: var(--ags-muted);
}

/* iOS Safari ingrandisce la pagina quando si tocca un campo con testo sotto i 16px e non
   la riporta indietro. Su schermi touch e stretti i campi restano a 16px anche dove un
   componente li rimpicciolisce (DataTables, commenti ai post, tema dell'area utente):
   important perché quelle regole arrivano con specificità e ordini diversi. */
@media (max-width: 991.98px), (pointer: coarse)
{
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
	select,
	textarea,
	.select2-search__field
	{
		font-size: 16px !important;
	}
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus
{
	border-color: var(--ags-green);
	box-shadow:   0 0 0 3px rgba(63, 122, 88, 0.15);
}

/* app.css colora di rosso fisso ogni campo obbligatorio, anche prima che l'utente scriva
   (per le select il correttivo era già in ags-components.css): qui il bordo torna normale
   e il rosso arriva solo se il valore inserito non è valido, non per la sola obbligatorietà. */
input[required],
textarea[required]
{
	border: 1px solid var(--ags-border) !important;
}

input[required]:focus,
textarea[required]:focus
{
	border-color: var(--ags-green) !important;
}

/* ":invalid:not(:placeholder-shown)" si affidava al placeholder per capire se il campo
   era ancora vuoto: i campi senza placeholder (es. Nome e cognome, Email di Contattaci)
   risultavano "non vuoti" da subito e comparivano rossi già al primo caricamento.
   ":user-invalid" non dipende dal placeholder: il rosso arriva solo dopo che l'utente ha
   toccato il campo e lo ha lasciato non valido, mai per la sola obbligatorietà. */
input[required]:not([type="checkbox"]):not([type="radio"]):user-invalid,
textarea[required]:user-invalid,
input[type="checkbox"][required]:user-invalid,
input[type="radio"][required]:user-invalid
{
	border-color: var(--ags-danger) !important;
}

/** BOTTONI **/

.btn-primary
{
	background-color: var(--ags-forest);
	border-color:      var(--ags-forest);
}

.btn-primary:hover,
.btn-primary:focus
{
	background-color: var(--ags-green);
	border-color:      var(--ags-green);
}

.btn-outline-primary
{
	border-color: var(--ags-forest);
	color:        var(--ags-forest);
}

.btn-outline-primary:hover
{
	background-color: var(--ags-forest);
	border-color:      var(--ags-forest);
}