/*
 * css/login.css
 *
 * wp-login.php reskin — enqueued by hhc_login_assets() (inc/login.php),
 * after main.css (light-mode tokens) and, on app.holcombe.hockey, after
 * css/app-shell.css too (which repoints those same tokens dark and adds
 * the hhc-app body class via the login_body_class filter). Built
 * entirely on --paper/--ink/--border/--red/--radius/--shadow so it
 * never needs its own light/dark branching — same reuse
 * inc/public-portal-styles.php's own docblock explains for the rest of
 * the site's genuinely public-facing pages.
 *
 * The one exception is the page background: app-shell.css sets that
 * directly from --hhc-app-bg (the true near-black, not the --paper
 * card colour), so it's left alone here rather than fought over with
 * a :not(.hhc-app) guard instead of relying on stylesheet order.
 */

body.login:not(.hhc-app) {
	background: var(--paper);
}

body.login #login {
	width: 100%;
	max-width: 380px;
}

body.login #login h1 a {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 84px;
	height: 84px;
	margin: 0 auto 20px;
}

body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
	background: var(--paper);
	border: 1px solid var(--border);
	border-top: 4px solid var(--red);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 26px 24px;
}

body.login label {
	color: var(--ink);
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	background: var(--paper);
	border: 1px solid var(--border);
	color: var(--ink);
	border-radius: 6px;
	box-shadow: none;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: var(--red);
	box-shadow: 0 0 0 3px rgba(227, 27, 35, .12);
}

body.login .button-primary {
	background: var(--red);
	border-color: var(--red-dark);
	box-shadow: none;
	text-shadow: none;
}
body.login .button-primary:hover,
body.login .button-primary:focus {
	background: var(--red-dark);
	border-color: var(--red-dark);
}

body.login #nav a,
body.login #backtoblog a {
	color: var(--muted);
}
body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--red);
}

body.login .message,
body.login #login_error {
	background: var(--paper);
	color: var(--ink);
	border-left-color: var(--red);
	border-radius: 6px;
}