/*
 * §44: wp-login.php in the site's palette.
 *
 * ⚠️ Every colour here is a token from tokens.css and there is not one literal. The login page is
 * the easiest place in a project to leave a hard-coded hex behind, because it is the one page a
 * palette change is never checked against.
 *
 * ⚠️ Selectors are core's own ids and classes (#login, #loginform, .button-primary). They are not
 * ours to rename, and a WordPress upgrade can change them — so nothing here is load-bearing: with
 * every rule dropped the page is still a working, legible login form.
 */

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

/*
 * ⚠️ `margin-inline: auto` is not optional here. Core centres #login with `margin: auto`, and
 * setting `width` without restoring the auto margins pins the form to the left edge of a wide
 * window — which looks like a broken stylesheet rather than a narrower one.
 */
#login {
	width: min(100%, 26rem);
	margin-inline: auto;
	padding: var(--srt-space-lg, 1.5rem) var(--srt-space-md, 1rem);
}

/* The W mark, replaced by the wordmark srt_login_wordmark() prints inside the form. */
.login h1 a {
	display: none;
}

.srt-login-mark {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0 0 var(--srt-space-md, 1rem);
}

.srt-login-mark__name {
	font-size: var(--srt-title-md, 1.375rem);
	font-weight: var(--srt-weight-bold, 700);
	color: var(--srt-text);
}

.srt-login-mark__tagline {
	font-size: var(--srt-text-xs, 0.8rem);
	color: var(--srt-text-muted);
}

.login form,
.login .message,
.login .notice,
.login #login_error {
	background: var(--srt-surface);
	border: 1px solid var(--srt-border);
	border-radius: var(--srt-radius-lg, 12px);
	box-shadow: var(--srt-shadow);
	color: var(--srt-text);
}

.login #login_error,
.login .notice-error {
	border-left: 4px solid var(--srt-danger);
}

.login label,
.login form .forgetmenot label {
	color: var(--srt-text-muted);
	font-size: var(--srt-text-sm, 0.9rem);
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: var(--srt-surface-2);
	color: var(--srt-text);
	border: 1px solid var(--srt-border-strong);
	border-radius: var(--srt-radius);
	min-height: 44px;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
.login .button:focus {
	outline: var(--srt-focus-width, 2px) solid var(--srt-focus);
	outline-offset: var(--srt-focus-offset, 2px);
	box-shadow: none;
}

.wp-core-ui .button-primary {
	background: var(--srt-accent);
	border-color: var(--srt-accent);
	color: var(--srt-on-accent);
	border-radius: var(--srt-radius);
	min-height: 44px;
	text-shadow: none;
	box-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--srt-accent-hover);
	border-color: var(--srt-accent-hover);
	color: var(--srt-on-accent);
}

.login #backtoblog a,
.login #nav a,
.srt-login-back a {
	color: var(--srt-accent-text);
}

.srt-login-back {
	margin-top: var(--srt-space-sm, 0.75rem);
	text-align: center;
	font-size: var(--srt-text-sm, 0.9rem);
}

/* The password-visibility toggle is a core control; it must not vanish into the field. */
.login .wp-hide-pw .dashicons {
	color: var(--srt-text-muted);
}

/* Core's privacy-policy link sits outside #login and keeps the browser's default link colour. */
.login .privacy-policy-page-link a {
	color: var(--srt-accent-text);
}