/* Stile di base di login, pannello provvisorio e 404. Colori e font da rifinire con la grafica Bloomart (fase 2). */

@font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url("fonts/open-sans-v40-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-display: swap; src: url("fonts/open-sans-v40-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-display: swap; src: url("fonts/open-sans-v40-latin-700.woff2") format("woff2"); }

:root {
	/* Marchio Bloomart: nero caldo del logo e blu primario del sito (variabile $brand-color di bloomart.it).
	   --brand per elementi grafici e focus; --brand-strong per testo e pulsanti (contrasto 6:1 su bianco) */
	--brand: #0080af;
	--brand-strong: #00698f;
	--brand-ink: #ffffff;
	--bg: #f5f4f1;
	--surface: #ffffff;
	--ink: #1d1d1b;
	--muted: #5f5f5a;
	--line: #dcdad4;
	--soft: #eaf4f8;
	--danger-bg: #fdecec;
	--danger-ink: #8a1c1c;
}

@media (prefers-color-scheme: dark) {
	:root {
		--brand: #4db8e0;
		--brand-strong: #4db8e0;
		--brand-ink: #0f1a20;
		--bg: #151514;
		--surface: #1f1f1d;
		--ink: #f1f0ec;
		--muted: #a9a8a1;
		--line: #353532;
		--soft: #1a2a31;
		--danger-bg: #3a1d1d;
		--danger-ink: #ffb4b4;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 16px;
	background: var(--bg);
	color: var(--ink);
	font: 400 16px/1.5 "Open Sans", system-ui, sans-serif;
}

.card {
	width: 100%;
	max-width: 400px;
	padding: 32px 28px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	border-top: 3px solid var(--brand);
}

.logo { display: block; height: 22px; width: auto; margin-bottom: 28px; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .logo-light { display: none; } .logo-dark { display: block; } }

h1 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; }
p { margin: 0 0 16px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; margin: 20px 0 0; text-align: center; }
a { color: var(--brand-strong); }

label { display: block; margin: 16px 0 6px; font-weight: 600; font-size: .9rem; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }

input[type=email], input[type=password], input[type=text] {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	color: inherit;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
}

input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

button {
	width: 100%;
	margin-top: 20px;
	padding: 11px 16px;
	font: 600 1rem "Open Sans", system-ui, sans-serif;
	color: var(--brand-ink);
	background: var(--brand-strong);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
button.secondary { color: var(--ink); background: transparent; border: 1px solid var(--line); }

.code-input { font: 600 1.25rem/1.4 "Open Sans", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-align: center; }

.alert { padding: 10px 12px; color: var(--danger-ink); background: var(--danger-bg); border-radius: 8px; }