@import 'tailwindcss';
@import '@fontsource-variable/open-sans';
@import '@fontsource-variable/oswald';

@theme {
	--font-sans: 'Open Sans Variable', 'Open Sans', Arial, sans-serif;
	--font-titolo: 'Oswald Variable', 'Oswald', 'Arial Narrow', sans-serif;

	/* Blu del logo Inlumia (#016f96) */
	--color-brand-50: #e6f3f8;
	--color-brand-100: #c3e1ec;
	--color-brand-200: #8cc5db;
	--color-brand-300: #4fa4c4;
	--color-brand-400: #1f86ab;
	--color-brand-500: #016f96;
	--color-brand-600: #015f81;
	--color-brand-700: #014e6a;
	--color-brand-800: #023e54;
	--color-brand-900: #032e3e;

	/* Neutri presi dal sito inlumia.it */
	--color-inchiostro: #182326;
	--color-grigio: #53615f;
	--color-linea: #d7deda;
	--color-sfondo: #f2f5f4;
	--color-verde: #006b5c;
}

@layer base {
	html {
		color: var(--color-inchiostro);
		background: var(--color-sfondo);
		-webkit-text-size-adjust: 100%;
	}
	h1, h2, h3 {
		font-family: var(--font-titolo);
		letter-spacing: 0.01em;
	}
	:focus-visible {
		outline: 3px solid var(--color-brand-300);
		outline-offset: 2px;
	}
}

/*
 * Componenti. Due sole altezze per pulsanti e campi, così stanno allineati quando sono
 * sulla stessa riga: normale 44 px (anche come area da toccare sul telefono) e piccola
 * 36 px, solo per le azioni ripetute dentro una riga di elenco.
 * Gerarchia dei pulsanti: primario (una sola azione principale per riquadro),
 * secondario, testo (azioni di contorno), pericolo (eliminare, sospendere).
 */
@layer components {
	.campo {
		@apply block w-full rounded-md border border-linea bg-white px-3 text-base text-inchiostro placeholder:text-grigio/60 focus:border-brand-500 focus:ring-2 focus:ring-brand-100 focus:outline-none disabled:bg-sfondo;
	}
	input.campo,
	select.campo {
		@apply h-11;
	}
	textarea.campo {
		@apply py-2.5;
	}
	.campo-piccolo {
		@apply h-9! text-sm;
	}
	.campo-codice {
		@apply h-14! text-center font-mono text-2xl tracking-[0.4em];
	}
	.etichetta {
		@apply mb-1 block text-sm font-semibold text-inchiostro;
	}
	.btn {
		@apply inline-flex h-11 shrink-0 items-center justify-center gap-2 rounded-md border border-transparent px-4 text-sm font-semibold whitespace-nowrap transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-60;
	}
	.btn-piccolo {
		@apply h-9 px-3;
	}
	.btn-primario {
		@apply bg-brand-500 text-white hover:bg-brand-600 active:bg-brand-700;
	}
	.btn-secondario {
		@apply border-linea bg-white text-inchiostro hover:border-brand-300 hover:text-brand-700 active:bg-brand-50;
	}
	.btn-testo {
		@apply px-3 text-brand-600 hover:bg-brand-50 active:bg-brand-100;
	}
	.btn-pericolo {
		@apply border-red-200 bg-white text-red-700 hover:border-red-300 hover:bg-red-50 active:bg-red-100;
	}
	.avviso-errore {
		@apply rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800;
	}
	.avviso-ok {
		@apply rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-900;
	}
	.scheda {
		@apply rounded-xl border border-linea bg-white;
	}
	.collegamento {
		@apply font-semibold text-brand-600 underline decoration-brand-200 underline-offset-2 hover:decoration-brand-500;
	}
}