:root {
	--wf-color-brand-600: #15825f;
	--wf-color-brand-700: #0e684b;
	--wf-color-brand-100: #e5f3ee;
	--wf-color-text: #17201d;
	--wf-color-muted: #68736f;
	--wf-color-border: #dfe5e2;
	--wf-color-surface: #ffffff;
	--wf-color-canvas: #f6f8f7;
}

.navbar-brand img,
.web-navbar .navbar-brand img {
	max-height: 32px;
}

body[data-path="login"] .btn-primary,
body[data-path="login"] .btn-login {
	border-color: var(--wf-color-brand-600);
	background: var(--wf-color-brand-600);
}

body[data-path="login"] .btn-primary:hover,
body[data-path="login"] .btn-login:hover {
	border-color: var(--wf-color-brand-700);
	background: var(--wf-color-brand-700);
}

body[data-path="login"] a {
	color: var(--wf-color-brand-700);
}

body[data-path="login"] .page-card {
	border: 1px solid var(--wf-color-border);
	border-radius: 18px;
	box-shadow: 0 16px 48px rgba(23, 32, 29, .08);
}

body[data-path="login"] .page-card-head img,
body[data-path="login"] .app-logo {
	width: 56px;
	height: 56px;
	border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
	body[data-path="login"] *,
	body[data-path="login"] *::before,
	body[data-path="login"] *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}