/*
 * Pervaaz — wp-login.php reskin (staged-onboarding Phase 2, 2.2).
 * ONE pass over every core auth moment: login, error re-render, invite redemption
 * (action=rp), forgot-password (action=lostpassword), and the Two-Factor challenge
 * interstitial — all render through core login_header(), so this stylesheet reskins
 * them together. Core keeps rendering + enforcing; we own the pixels. Shares the
 * --pv-* tokens with the landing + the app.
 */

:root {
	--pv-teal: #0f5a5a;
	--pv-terracotta: #b8552e;
	--pv-clay: #d97c4f;
	--pv-gold: #c89b3c;
	--pv-ink: #1f1a16;
	--pv-cream: #faf6f1;
	--pv-sand: #efe7db;
	--pv-muted: #7a6e62;
	--pv-border: rgba(31, 26, 22, 0.10);
	--pv-destructive: #b3261e;
}

body.login {
	background: var(--pv-cream);
	color: var(--pv-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Form controls do NOT inherit font-family from body by default — without this
   the reset screen's fields/buttons render in the UA's own font, off-theme
   (operator 2026-07-19: keep this surface in the app's friendly face). */
body.login input,
body.login button,
body.login select,
body.login textarea {
	font-family: inherit;
}

/* Wordmark in place of the WordPress logo. */
#login h1 a,
.login h1 a {
	background: none;
	width: auto;
	height: auto;
	text-indent: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--pv-teal);
	line-height: 1.2;
}
#login h1 a::before {
	content: "P";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-right: 8px;
	border-radius: 8px;
	background: var(--pv-teal);
	color: #fff;
	font-weight: 700;
	vertical-align: middle;
}
#login h1 a::after {
	content: "Pervaaz";
	color: var(--pv-ink);
}

#login {
	width: 340px;
	padding: 6% 0 0;
}

/* The card. */
.login form {
	background: #fffdf9;
	border: 1px solid var(--pv-border);
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(31, 26, 22, 0.06);
	padding: 26px 24px;
	margin-top: 20px;
}

.login label {
	color: var(--pv-ink);
	font-size: 14px;
	font-weight: 500;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: #fffdf9;
	border: 1px solid var(--pv-border);
	border-radius: 12px;
	color: var(--pv-ink);
	font-size: 15px;
	padding: 10px 12px;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	outline: 2px solid var(--pv-teal);
	outline-offset: 1px;
	border-color: transparent;
	box-shadow: none;
}

/* Primary action. */
.wp-core-ui .button-primary,
.login .button-primary {
	background: var(--pv-terracotta);
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	text-shadow: none;
	font-weight: 600;
	height: 42px;
	padding: 0 16px;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: #a54a27;
}

/* Links + secondary text. */
.login #nav a,
.login #backtoblog a,
.login a {
	color: var(--pv-teal);
}
.login #nav,
.login #backtoblog {
	color: var(--pv-muted);
	padding: 12px 8px 0;
}

/* Messages: the passphrase guidance (teal) vs the reset/confirmation (calm). */
.login .message,
.login .success {
	border-left: 4px solid var(--pv-teal);
	background: #fffdf9;
	border-radius: 8px;
	color: var(--pv-ink);
	box-shadow: 0 4px 16px rgba(31, 26, 22, 0.05);
}
.login .message.pervaaz-passphrase {
	border-left-color: var(--pv-clay);
	color: var(--pv-muted);
}

/* Error re-render — masked copy (login-feedback block), calmly styled. */
.login #login_error {
	border-left: 4px solid var(--pv-destructive);
	background: rgba(179, 38, 30, 0.06);
	border-radius: 8px;
	color: var(--pv-ink);
	box-shadow: none;
}

/* O19 "Choose your username" field on the redemption screen. */
.pervaaz-username-field {
	margin: 4px 0 14px;
}
.pervaaz-username-field label {
	display: block;
	margin-bottom: 6px;
}
.pervaaz-username-field .input {
	width: 100%;
}
.pervaaz-username-hint,
.pervaaz-username-live {
	font-size: 12px;
	color: var(--pv-muted);
	margin: 6px 0 0;
}
.pervaaz-username-live {
	min-height: 1em;
	font-weight: 500;
}

/* Two-Factor challenge interstitial — same card language. */
.login .two-factor-prompt,
#login .two-factor-methods,
.login form.two-factor {
	color: var(--pv-ink);
}
.login .backup-methods-wrap a {
	color: var(--pv-teal);
}