/* byalma Dashboard — login screen to match the dashboard. */

@font-face {
	font-family: "Geist";
	src: url("../fonts/geist.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--ba-bg: #F5F4F1;
	--ba-surface: #FFFFFF;
	--ba-border: #DEDBD4;
	--ba-border-strong: #CFCBC3;
	--ba-text: #1D1C1A;
	--ba-muted: #5F5B55;
	--ba-accent: #1F6F6B;
	--ba-accent-strong: #185753;
	--ba-accent-text: #185753;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ba-bg: #161514;
		--ba-surface: #201F1D;
		--ba-border: #34322F;
		--ba-border-strong: #47443F;
		--ba-text: #EDEBE7;
		--ba-muted: #A29D95;
	}
}

body.login {
	background: var(--ba-bg);
	color: var(--ba-text);
	font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.login h1 a {
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: 14px;
	background-color: var(--ba-accent);
	background-image: none;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.login form {
	padding: 28px;
	border: 1px solid var(--ba-border);
	border-radius: 18px;
	background: var(--ba-surface);
	box-shadow: none;
}

.login label {
	color: var(--ba-text);
	font-size: 14px;
	font-weight: 600;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--ba-border-strong);
	border-radius: 10px;
	background: var(--ba-surface);
	color: var(--ba-text);
	font-size: 16px;
	box-shadow: none;
}

.login form .input:focus,
.login input:focus {
	border-color: transparent;
	outline: 2px solid var(--ba-accent);
	box-shadow: none;
}

.wp-core-ui .button-primary {
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: var(--ba-accent);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 500;
	box-shadow: none;
	text-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--ba-accent-strong);
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-link {
	color: var(--ba-muted);
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--ba-text);
}

.login .message,
.login .notice,
.login .success,
.login #login_error {
	border-radius: 12px;
	border-left-color: var(--ba-accent);
	background: var(--ba-surface);
	color: var(--ba-text);
}

.login .button.wp-hide-pw {
	color: var(--ba-muted);
}

.login input[type="checkbox"] {
	accent-color: var(--ba-accent);
}