/* ══════════════════════════════════════════════════════════════
   VendMizer Landing — wp-login.php branding.

   Restyles the WordPress auth screens (log in, register, lost
   password, reset password, confirmations) to match the landing,
   built from the SAME design tokens (assets/css/landing.css):
   amber/brand accent on zinc, Outfit + DM Sans, 10–16px radii,
   brand glows. Purely presentational — no auth behavior changes.

   The operator's brand color (--amber-rgb) and the logo are injected
   inline by VENDML_Auth::head_vars(); this file ships the defaults and
   the light/dark palettes. Theme is chosen by a body class:
   .vendml-theme-dark | .vendml-theme-light | .vendml-theme-auto (follows the
   visitor's OS preference). Layout uses logical properties so a
   right-to-left site locale mirrors correctly.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens: dark (default) ─────────────────────────────────────── */
body.login.vendml-login {
	--amber-rgb: 0 164 255;               /* default brand blue; overridden inline */
	--amber: rgb(var(--amber-rgb));
	--primary-fill: var(--amber);
	--on-primary: #09090b;
	--accent-text-dark: #14abff;
	--accent-text-light: #00598a;
	--accent-text: var(--accent-text-dark);
	--page-bg: #09090b;
	--card: #18181b;
	--seam: #27272a;
	--input-bg: #0f0f12;
	--bone: #fafafa;
	--zinc: #a3a3ac;
	--grid-line: rgba(255, 255, 255, 0.07);
	--radius: 10px;
	--radius-lg: 16px;
	--glow: 0 4px 24px rgb(var(--amber-rgb) / 0.28);
	--ring: 0 0 0 3px rgb(var(--amber-rgb) / 0.22);
	--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
	--font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color-scheme: dark;
}

/* ── Tokens: light (explicit, or auto + OS light) ───────────────── */
body.login.vendml-login.vendml-theme-light {
	--accent-text: var(--accent-text-light);
	--page-bg: #f8f8f7;
	--card: #ffffff;
	--seam: #e7e5e4;
	--input-bg: #ffffff;
	--bone: #1c1917;
	--zinc: #57534e;
	--grid-line: rgba(9, 9, 11, 0.07);
	--glow: 0 4px 20px rgb(var(--amber-rgb) / 0.30);
	--shadow-lg: 0 16px 44px rgba(28, 25, 23, 0.12);
	color-scheme: light;
}

@media (prefers-color-scheme: light) {
	body.login.vendml-login.vendml-theme-auto {
		--accent-text: var(--accent-text-light);
		--page-bg: #f8f8f7;
		--card: #ffffff;
		--seam: #e7e5e4;
		--input-bg: #ffffff;
		--bone: #1c1917;
		--zinc: #57534e;
		--grid-line: rgba(9, 9, 11, 0.07);
		--glow: 0 4px 20px rgb(var(--amber-rgb) / 0.30);
		--shadow-lg: 0 16px 44px rgba(28, 25, 23, 0.12);
		color-scheme: light;
	}
}

/* ── Page canvas ────────────────────────────────────────────────── */
body.login.vendml-login {
	background-color: var(--page-bg);
	color: var(--bone);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Optional brand backgrounds (chosen in settings). */
body.login.vendml-login.vendml-bg-glow {
	background-image:
		radial-gradient(58% 46% at 50% -4%, rgb(var(--amber-rgb) / 0.16), transparent 70%),
		radial-gradient(38% 40% at 92% 8%, rgb(var(--amber-rgb) / 0.08), transparent 72%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

body.login.vendml-login.vendml-bg-grid {
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 34px 34px;
	background-position: center top;
}

/* ── Logo (image injected inline by VENDML_Auth) ───────────────────── */
body.login.vendml-login #login {
	width: 340px;
	max-width: 92vw;
	padding-top: 6vh;
}

body.login.vendml-login h1 a {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 60px;
	margin-bottom: 22px;
	border-radius: 0;
}

/* ── The form card ──────────────────────────────────────────────── */
body.login.vendml-login #loginform,
body.login.vendml-login #registerform,
body.login.vendml-login #lostpasswordform,
body.login.vendml-login #resetpassform {
	background: var(--card);
	border: 1px solid var(--seam);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 26px 24px 24px;
}

body.login.vendml-login form .input,
body.login.vendml-login form input[type="text"],
body.login.vendml-login form input[type="password"],
body.login.vendml-login form input[type="email"] {
	background: var(--input-bg);
	border: 1px solid var(--seam);
	border-radius: var(--radius);
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 16px;
	padding: 10px 12px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.login.vendml-login form .input:focus,
body.login.vendml-login form input[type="text"]:focus,
body.login.vendml-login form input[type="password"]:focus,
body.login.vendml-login form input[type="email"]:focus {
	border-color: var(--amber);
	box-shadow: var(--ring);
	outline: 2px solid transparent;
}

body.login.vendml-login form label {
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 14px;
}

body.login.vendml-login .forgetmenot label,
body.login.vendml-login .login .privacy-policy-link,
body.login.vendml-login #reg_passmail {
	color: var(--zinc);
}

body.login.vendml-login input[type="checkbox"] {
	accent-color: var(--amber);
	border-radius: 4px;
}

/* Show/hide-password affordance. */
body.login.vendml-login .wp-pwd .button.wp-hide-pw {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--zinc);
}

body.login.vendml-login .wp-pwd .button.wp-hide-pw:hover {
	color: var(--accent-text);
}

/* ── Primary button ─────────────────────────────────────────────── */
body.login.vendml-login .button-primary,
body.login.vendml-login #wp-submit {
	background: var(--primary-fill) !important;
	border: 0 !important;
	color: var(--on-primary) !important;
	border-radius: var(--radius);
	box-shadow: var(--glow);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-shadow: none !important;
	padding: 9px 18px;
	height: auto;
	line-height: 1.6;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.login.vendml-login .button-primary:hover,
body.login.vendml-login #wp-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 32px rgb(var(--amber-rgb) / 0.40);
}

body.login.vendml-login .button-primary:focus,
body.login.vendml-login #wp-submit:focus {
	box-shadow: var(--ring);
	outline: 2px solid transparent;
}

/* ── Secondary links (register / lost password / back) ──────────── */
body.login.vendml-login #nav,
body.login.vendml-login #backtoblog {
	padding-inline: 4px;
}

body.login.vendml-login #nav a,
body.login.vendml-login #backtoblog a {
	color: var(--zinc);
	transition: color 0.15s ease;
}

body.login.vendml-login #nav a:hover,
body.login.vendml-login #backtoblog a:hover,
body.login.vendml-login #nav a:focus,
body.login.vendml-login #backtoblog a:focus {
	color: var(--accent-text);
}

/* ── Notices / errors / success ─────────────────────────────────── */
body.login.vendml-login #login .message,
body.login.vendml-login #login .notice,
body.login.vendml-login #login_error {
	background: var(--card);
	border: 1px solid var(--seam);
	border-inline-start: 4px solid var(--amber);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	color: var(--bone);
	padding: 12px 16px;
	margin: 0 0 16px;
}

body.login.vendml-login #login_error {
	border-inline-start-color: #e03131;
}

body.login.vendml-login #login .message.info,
body.login.vendml-login #login .notice-success {
	border-inline-start-color: #12b886;
}

/* Password-strength meter tints. */
body.login.vendml-login #pass-strength-result.strong {
	background: rgba(18, 184, 134, 0.14);
	border-color: #12b886;
}

body.login.vendml-login #pass-strength-result.good {
	background: rgb(var(--amber-rgb) / 0.14);
	border-color: var(--amber);
}

/* ── Language switcher + footer chrome ──────────────────────────── */
body.login.vendml-login .language-switcher select {
	background: var(--card);
	border: 1px solid var(--seam);
	border-radius: var(--radius);
	color: var(--bone);
}

body.login.vendml-login .language-switcher .button {
	border-radius: var(--radius);
}