/* Branded status/health page for the API root.
 *
 * MIRRORS the Windows app's design tokens (CLAUDE.md Sec 10a). The canonical
 * source is `Windows-App/src/renderer/styles.css`: when a value changes there,
 * it is updated HERE and nowhere else. The same names and values therefore
 * appear below; the status page has no colour system of its own.
 *
 * This contains only the subset this page needs. A complete copy of the token
 * block would add 60 unused lines to the next synchronization without styling
 * anything.
 */
:root {
	/* --- Colour ---------------------------------------------------------- */
	--bg: #f4f5f7;
	--card: #ffffff;
	--ink: #1f2430;
	--muted: #6b7280;
	--border: #e2e5ea;
	--accent: #2563eb;
	--accent-tint: #f0f4ff;
	--success: #16a34a;			/* ok - ONE green throughout the project */
	--danger: #c0392b;			/* fail */

	/* --- Typography ------------------------------------------------------ */
	--font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
	--text-xs: 0.6875rem;
	--text-sm: 0.75rem;
	--text-base: 0.875rem;
	--text-xl: 1.125rem;
	--weight-semibold: 600;
	--leading: 1.45;

	/* --- Spacing --------------------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.375rem;
	--space-3: 0.5rem;
	--space-5: 0.75rem;
	--space-6: 1rem;
	--space-7: 1.25rem;
	--space-8: 1.75rem;

	/* --- Corners, lines, elevation ---------------------------------------- */
	--radius-md: 0.375rem;
	--radius-lg: 0.625rem;
	--radius-pill: 62.5rem;
	--hairline: 1px;
	--shadow-lg: 0 8px 24px rgba(31, 36, 48, 0.18);

	/* --- Base size: scales the ENTIRE page --------------------------------- */
	--ui-base: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--ui-base); }

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-sans);
	color: var(--ink);
	background:
		radial-gradient(75rem 31rem at 50% -10%, var(--accent-tint) 0%, transparent 60%),
		var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-8);
}

.wrap { width: 100%; max-width: 27.5rem; }

.card {
	background: var(--card);
	border: var(--hairline) solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	box-shadow: var(--shadow-lg);
}

.brand {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin-bottom: var(--space-8);
}
.logo { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md); flex: none; }
.brand h1 { font-size: var(--text-xl); margin: 0; letter-spacing: -0.01em; }
.brand .sub { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-sm); }

.status {
	border: var(--hairline) solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-5) var(--space-6);
	border-bottom: var(--hairline) solid var(--border);
}
.status-row:last-child { border-bottom: 0; }
.status-row .label { color: var(--muted); font-size: var(--text-base); }
.status-row .value { font-variant-numeric: tabular-nums; font-size: var(--text-base); }

.badge {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	padding: var(--space-1) var(--space-5);
	border-radius: var(--radius-pill);
}
.badge.ok { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.badge.fail { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

.hint {
	margin: var(--space-7) var(--space-1) 0;
	color: var(--muted);
	font-size: var(--text-sm);
	line-height: var(--leading);
}

.foot {
	text-align: center;
	color: var(--muted);
	font-size: var(--text-sm);
	margin-top: var(--space-6);
}