/* ==========================================================
   imolicitatii.ro — sistem de design
   Identitate: precizie notarială/cadastrală, incredere, sobru.
   ========================================================== */

:root {
	/* Culoare */
	--ink: #14212e;
	--ink-soft: #2a3a4a;
	--parchment: #f6f1e7;
	--parchment-dim: #ede5d3;
	--line: #d9ceb8;
	--sienna: #c1541f;
	--sienna-soft: #e8b391;
	--sienna-tint: #f7e6db;
	--verde: #2f4d3a;
	--verde-soft: #e4ebe4;
	--wine: #6d2c42;
	--wine-soft: #f1e2e7;
	--white: #fffdf9;

	/* Tipografie */
	--font-display: 'Fraunces', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-data: 'IBM Plex Mono', 'Courier New', monospace;

	/* Spatiere */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;

	--radius: 3px; /* colturi aproape drepte - registru, nu aplicatie casual */
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--parchment);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	min-height: 100vh;
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 var(--space-2);
	letter-spacing: -0.01em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }

p { margin: 0 0 var(--space-2); }

a { color: var(--ink); }

.mono {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}

/* ---------- Fundal cadastral: element de semnatura al site-ului ---------- */
.cadastral-backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 64px 64px;
	opacity: 0.35;
	pointer-events: none;
}

.cadastral-backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, transparent 0%, var(--parchment) 75%);
}

/* ---------- Antet comun ---------- */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--line);
}

.brand {
	display: flex;
	align-items: baseline;
	gap: var(--space-1);
	text-decoration: none;
	color: var(--ink);
}

.brand .mark {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
}

.brand .tag {
	font-family: var(--font-data);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sienna);
	border: 1px solid var(--sienna-soft);
	padding: 2px 6px;
	border-radius: var(--radius);
}

/* ---------- Documentul central (carduri tip "dosar") ---------- */
.file-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 1px 2px rgba(20, 33, 46, 0.06);
	padding: var(--space-4);
}

.file-card .eyebrow {
	font-family: var(--font-data);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: var(--space-1);
}

/* ---------- Formulare ---------- */
label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.375rem;
	color: var(--ink-soft);
}

input, select, textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	margin-bottom: var(--space-2);
}

input:focus, select:focus, textarea:focus {
	outline: 2px solid var(--sienna);
	outline-offset: 1px;
	border-color: var(--sienna);
}

.field-group {
	margin-bottom: var(--space-2);
}

/* ---------- Butoane ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.05s ease, box-shadow 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
	background: var(--ink);
	color: var(--parchment);
}
.btn-primary:hover { background: var(--ink-soft); }

.btn-outline {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}
.btn-outline:hover { border-color: var(--ink); }

.btn-block { width: 100%; }

/* ---------- Selector de rol (tip-de-dosar) ---------- */
.role-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: var(--space-3);
}

.role-tabs button {
	appearance: none;
	border: none;
	background: var(--white);
	padding: 0.75rem 0.5rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink-soft);
	cursor: pointer;
	border-right: 1px solid var(--line);
}
.role-tabs button:last-child { border-right: none; }

.role-tabs button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--parchment);
}

/* ---------- Mesaje ---------- */
.notice {
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	font-size: 0.875rem;
	margin-bottom: var(--space-2);
	display: none;
}
.notice.visible { display: block; }
.notice.error { background: var(--wine-soft); color: var(--wine); border: 1px solid var(--wine); }
.notice.success { background: var(--verde-soft); color: var(--verde); border: 1px solid var(--verde); }

/* ---------- Etichete de stare (badge-uri) ---------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--font-data);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius);
}
.badge-sienna { background: rgba(193, 84, 31, 0.12); color: var(--sienna); }
.badge-verde { background: var(--verde-soft); color: var(--verde); }
.badge-wine { background: var(--wine-soft); color: var(--wine); }

/* ---------- Utilitare de layout ---------- */
.center-screen {
	min-height: calc(100vh - 73px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3);
}

.stack { display: flex; flex-direction: column; }
.text-muted { color: var(--ink-soft); }
.text-small { font-size: 0.8125rem; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}