/**
 * Shop Titan — "Receipt" login screen.
 */

:root {
	--st-ink: #0a0a0a;
	--st-paper: #fafaf7;
	--st-white: #ffffff;
	--st-smoke: #9a9a9a;
	--st-accent: #0a0a0a;
	--st-login-bg: #fafaf7;
	--st-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--st-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.login {
	background: var(--st-login-bg);
	font-family: var(--st-sans);
}

#login h1 a {
	color: var(--st-ink);
	font-family: var(--st-sans);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.login form {
	background: var(--st-white);
	border: 1px solid var(--st-ink);
	border-top: 3px solid var(--st-ink);
	border-radius: 0;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.login label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	color: var(--st-ink);
	font-family: var(--st-mono);
}

.login input[type="text"],
.login input[type="password"] {
	border-radius: 0;
	border: 1px solid var(--st-ink);
	font-family: var(--st-mono);
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: var(--st-accent);
	box-shadow: 0 0 0 1px var(--st-accent);
}

.wp-core-ui .button-primary {
	background: var(--st-accent);
	border-color: var(--st-accent);
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-family: var(--st-mono);
	font-size: 12px;
	text-shadow: none;
	box-shadow: none;
}

.login #nav {
	border-top: 1px dashed var(--st-ink);
	margin-top: 16px;
	padding-top: 12px;
}

.login #backtoblog a,
.login #nav a {
	color: var(--st-smoke);
	font-family: var(--st-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

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