:root {
	--rl-login-ink:#16181b;
	--rl-login-muted:#6b7280;
	--rl-login-border:#d9dee2;
	--rl-login-surface:#edece8;
	--rl-login-red:#7a1f2b;
	--rl-login-teal:#0b6e75;
	--rl-login-white:#ffffff;
}
body.login {
	background:var(--rl-login-surface);
	color:var(--rl-login-ink);
	font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.login #login { width:min(92vw,400px); padding-top:clamp(3rem,8vh,6rem); }
.login h1 a {
	width:260px;
	height:220px;
	margin-bottom:1.6rem;
	background-image:url("../images/brand/wp-login-logo.png");
	background-position:center;
	background-size:contain;
}
.login form {
	border:1px solid var(--rl-login-border);
	border-radius:12px;
	background:var(--rl-login-white);
	box-shadow:0 16px 44px color-mix(in srgb, var(--rl-login-ink) 8%, transparent);
	padding:28px;
}
.login label { color:var(--rl-login-ink); font-weight:600; }
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	min-height:48px;
	border:1px solid var(--rl-login-muted);
	border-radius:8px;
	background:var(--rl-login-white);
	color:var(--rl-login-ink);
	box-shadow:none;
}
.login form .input:focus,
.login input:focus,
.login .button:focus {
	border-color:var(--rl-login-teal);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--rl-login-teal) 16%, transparent);
}
.login :where(input,button,a,select,textarea):focus-visible {
	outline:3px solid var(--rl-login-teal);
	outline-offset:3px;
}
.wp-core-ui .button-primary {
	min-height:44px;
	border-color:var(--rl-login-teal);
	border-radius:8px;
	background:var(--rl-login-teal);
	box-shadow:none;
	font-weight:600;
	text-shadow:none;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus { border-color:var(--rl-login-teal); background:var(--rl-login-teal); box-shadow:0 6px 16px color-mix(in srgb, var(--rl-login-ink) 12%, transparent); }
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a { color:var(--rl-login-red); text-underline-offset:.18em; }
.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover { color:var(--rl-login-teal); }
.login .message,
.login .notice,
.login .success {
	border-left-color:var(--rl-login-teal);
	border-radius:0 8px 8px 0;
}
.login #login_error { border-left-color:var(--rl-login-red); border-radius:0 8px 8px 0; }
.login .dashicons { color:var(--rl-login-muted); }
@media (max-width:480px) {
	.login #login { width:calc(100% - 32px); padding-top:2rem; }
	.login form { padding:22px; }
}