@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@600;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
	--zam-ink: #1a1a24;
	--zam-muted: #5c5c6e;
	--zam-line: #eceef1;
	--zam-soft: #f8f6fa;
	--zam-brand: #5b3a5c;
	--zam-brand-dark: #402941;
	--zam-accent: #e8b64c;
	--zam-font-display: 'Familjen Grotesk', -apple-system, sans-serif;
	--zam-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
	font-family: var(--zam-font-body) !important;
	background: var(--zam-soft) !important;
}

.page-content-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.page-card.login-content {
	max-width: 400px;
	background: #fff;
	border: 1px solid var(--zam-line);
	border-radius: 16px;
	box-shadow: 0 30px 60px -30px rgba(20, 10, 30, 0.28);
}

@media (min-width: 576px) {
	.page-card.login-content {
		padding: 40px 36px;
	}
}

.page-card-head {
	text-align: center;
	margin-bottom: 28px;
}

.page-card-head .app-logo {
	max-height: 72px;
	width: auto;
	margin: 0 auto 18px;
}

.page-card-head-text h4 {
	font-family: var(--zam-font-display);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.4px;
	color: var(--zam-ink);
}

.page-card-subtitle {
	color: var(--zam-muted);
	font-size: 14px;
	margin-top: 6px;
}

.form-label {
	font-family: var(--zam-font-body);
	font-weight: 600;
	font-size: 13px;
	color: var(--zam-ink);
}

.page-card .form-control {
	font-family: var(--zam-font-body);
	border: 1.5px solid var(--zam-line);
	border-radius: 8px;
	padding: 10px 13px;
	font-size: 14.5px;
	box-shadow: none;
	transition: border-color 0.15s;
}

.page-card .form-control:focus {
	border-color: var(--zam-brand);
	box-shadow: none;
}

.page-card a {
	color: var(--zam-brand);
}

.page-card .btn-login,
.page-card .btn-primary {
	font-family: var(--zam-font-body);
	background: var(--zam-brand) !important;
	border-color: var(--zam-brand) !important;
	color: #fff !important;
	border-radius: 8px;
	font-weight: 700;
	padding: 10px 0;
	transition: background 0.15s;
}

.page-card .btn-login:hover,
.page-card .btn-primary:hover {
	background: var(--zam-brand-dark) !important;
	border-color: var(--zam-brand-dark) !important;
}

.page-card .btn-default {
	border-radius: 8px;
	font-family: var(--zam-font-body);
}

.social-login-buttons .btn {
	border-radius: 8px;
	font-family: var(--zam-font-body);
}

.sign-up-message,
.forgot-password-message {
	font-size: 13.5px;
	color: var(--zam-muted);
}