/* Anonico: sistema visivo condiviso da app e sito.
   Palette del brand: fondo #14181C, corallo #E8566E, verde #3DB07A, grigio #D5DBE0, testo #F3F1EE.
   Il mondo: forme geometriche piene come nella grafica Olivetti di Pintori; i dati si coprono con blocchi. */

@font-face { font-family: "Red Hat Display"; font-weight: 500; font-display: swap; src: url("/caratteri/red-hat-display-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Display"; font-weight: 700; font-display: swap; src: url("/caratteri/red-hat-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Display"; font-weight: 900; font-display: swap; src: url("/caratteri/red-hat-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-weight: 400; font-display: swap; src: url("/caratteri/red-hat-text-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-weight: 500; font-display: swap; src: url("/caratteri/red-hat-text-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-weight: 700; font-display: swap; src: url("/caratteri/red-hat-text-latin-700-normal.woff2") format("woff2"); }

:root {
	color-scheme: dark;

	--fondo: #14181C;
	--superficie: #1D2228;
	--superficie-alta: #262C33;
	--linea: #2F363E;
	--linea-forte: #48515A;
	--testo: #F3F1EE;
	--testo-tenue: #A7B0B8;   /* 7:1 sul fondo */
	--testo-lieve: #8A939B;   /* 5:1 sul fondo, solo testi secondari brevi */

	--corallo: #E8566E;
	--corallo-scuro: #C9445B;
	--corallo-velo: rgba(232, 86, 110, 0.14);
	--verde: #3DB07A;
	--verde-scuro: #2E9465;
	--verde-velo: rgba(61, 176, 122, 0.14);
	--grigio: #D5DBE0;
	--grigio-velo: rgba(213, 219, 224, 0.12);
	--inchiostro: #14181C;    /* testo sopra corallo, verde e grigio */

	/* tipi di dato: tre famiglie, tre colori del pittogramma */
	--persone: var(--corallo);
	--codici: var(--verde);
	--recapiti: var(--grigio);
	--sensibili: var(--corallo);

	--display: "Red Hat Display", system-ui, sans-serif;
	--testo-font: "Red Hat Text", system-ui, sans-serif;

	--r-piccolo: 6px;
	--r: 12px;
	--r-grande: 18px;
	--ombra: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.28);
	--entra: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--fondo);
	color: var(--testo);
	font: 400 16px/1.6 var(--testo-font);
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--testo); text-decoration-color: var(--corallo); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-color: var(--testo); }
img, svg { display: block; }
[hidden] { display: none !important; }

::selection { background: var(--corallo); color: var(--inchiostro); }
:focus-visible { outline: 2.5px solid var(--verde); outline-offset: 3px; border-radius: var(--r-piccolo); }
* { scrollbar-width: thin; scrollbar-color: var(--linea-forte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linea-forte); border-radius: 10px; border: 3px solid var(--fondo); }
::-webkit-scrollbar-track { background: transparent; }

.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pulsanti */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 46px; padding: 0 20px;
	font: 700 15px/1 var(--testo-font);
	border-radius: var(--r); border: 1.5px solid transparent;
	background: var(--verde); color: var(--inchiostro);
	cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background-color .15s, border-color .15s, color .15s, transform .15s var(--entra);
}
.btn:hover { background: #4BC489; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.corallo { background: var(--corallo); }
.btn.corallo:hover { background: #F06A80; }
.btn.secondario { background: transparent; color: var(--testo); border-color: var(--linea-forte); }
.btn.secondario:hover { border-color: var(--testo-tenue); background: var(--superficie-alta); }
.btn.leggero { background: transparent; color: var(--testo-tenue); padding: 0 12px; }
.btn.leggero:hover { color: var(--testo); background: var(--superficie-alta); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.btn.in-corso { pointer-events: none; }
.btn.in-corso::after {
	content: ""; width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid currentColor; border-right-color: transparent;
	animation: giro .7s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

/* Campi */
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo > span { font: 500 14px var(--testo-font); color: var(--testo-tenue); }
.campo small { color: var(--testo-lieve); font-size: 13px; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
	width: 100%;
	font: 400 16px/1.5 var(--testo-font); color: var(--testo);
	background: var(--fondo); border: 1.5px solid var(--linea-forte); border-radius: var(--r);
	padding: 12px 14px; caret-color: var(--verde);
	transition: border-color .15s, background-color .15s;
}
textarea { resize: vertical; }
input[type="date"] { color-scheme: dark; }
input::placeholder, textarea::placeholder { color: var(--testo-lieve); }
input:hover, select:hover, textarea:hover { border-color: var(--testo-lieve); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde); background: #101317; }
input[aria-invalid="true"] { border-color: var(--corallo); }

.scelta { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--testo-tenue); cursor: pointer; }
.scelta input { appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--linea-forte); border-radius: 5px; background: var(--fondo); display: grid; place-content: center; cursor: pointer; }
.scelta input::after { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--verde); transform: scale(0); transition: transform .15s var(--entra); }
.scelta input:checked { border-color: var(--verde); }
.scelta input:checked::after { transform: scale(1); }
.scelta a { color: var(--testo); }

.avviso { border-radius: var(--r); padding: 14px 16px; font-size: 14.5px; background: var(--corallo-velo); color: var(--testo); }
.avviso.ok { background: var(--verde-velo); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}