/*
Code darkmode styles for the Wordpress wp-login.php page
Enqueue in @functions.php

Dual Dark Mode Support
e.g.
[data-theme="dark"] .signin-container {
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .signin-container {
	}
}

Use color scheme defined in theme @style.css
*/

/* ===========================
   DARK MODE - MANUAL TOGGLE
   =========================== */

[data-theme="dark"] body.login {
	background-color: var(--bg-primary, #1e1e1e);
}

[data-theme="dark"] .login form {
	background: var(--bg-secondary, #252533);
	border-color: var(--border-light, #3d3d5c);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .login form .input,
[data-theme="dark"] .login input[type="text"],
[data-theme="dark"] .login input[type="password"],
[data-theme="dark"] .login input[type="email"] {
	background-color: var(--bg-primary, #1e1e1e);
	border-color: var(--border-medium, #525263);
	color: var(--text-primary, #fcfcfc);
}

[data-theme="dark"] .login input[type="text"]:focus,
[data-theme="dark"] .login input[type="password"]:focus,
[data-theme="dark"] .login input[type="email"]:focus {
	border-color: var(--link-focus, #d4ab28);
	box-shadow: 0 0 0 1px var(--link-focus, #d4ab28);
}

[data-theme="dark"] .wp-core-ui .button-primary {
	background: var(--primary-light, #3d3d5c);
	border-color: var(--primary, #1a1a2e);
	color: var(--text-inverse, #fcfcfc);
}

[data-theme="dark"] .wp-core-ui .button-primary:hover,
[data-theme="dark"] .wp-core-ui .button-primary:focus {
	background: var(--primary, #1a1a2e);
	border-color: var(--primary-dark, #0d0d17);
}

[data-theme="dark"] .login #backtoblog a,
[data-theme="dark"] .login #nav a {
	color: var(--link-primary, #3d3d5c);
}

[data-theme="dark"] .login #backtoblog a:hover,
[data-theme="dark"] .login #nav a:hover {
	color: var(--link-hover, #9fb088);
}

[data-theme="dark"] .login .message,
[data-theme="dark"] .login .success {
	border-left-color: var(--brand-sage-dark, #a8c195);
	background-color: var(--success-alpha, rgba(168, 193, 149, 0.1));
	color: var(--text-primary, #fcfcfc);
}

[data-theme="dark"] .login #login_error {
	border-left-color: var(--brand-terracotta-dark, #d4615f);
	background-color: var(--error-alpha, rgba(212, 97, 95, 0.1));
	color: var(--text-primary, #fcfcfc);
}

[data-theme="dark"] .login label {
	color: var(--text-secondary, #d4d4d4);
}

[data-theme="dark"] .login .privacy-policy-page-link a {
	color: var(--text-tertiary, #a3a3a3);
}

[data-theme="dark"] #login h1 a,
[data-theme="dark"] .login h1 a {
	filter: brightness(1.2);
}

/* ===========================
   DARK MODE - SYSTEM PREFERENCE
   =========================== */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) body.login {
		background-color: var(--bg-primary, #1e1e1e);
	}

	:root:not([data-theme="light"]) .login form {
		background: var(--bg-secondary, #252533);
		border-color: var(--border-light, #3d3d5c);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}

	:root:not([data-theme="light"]) .login form .input,
	:root:not([data-theme="light"]) .login input[type="text"],
	:root:not([data-theme="light"]) .login input[type="password"],
	:root:not([data-theme="light"]) .login input[type="email"] {
		background-color: var(--bg-primary, #1e1e1e);
		border-color: var(--border-medium, #525263);
		color: var(--text-primary, #fcfcfc);
	}

	:root:not([data-theme="light"]) .login input[type="text"]:focus,
	:root:not([data-theme="light"]) .login input[type="password"]:focus,
	:root:not([data-theme="light"]) .login input[type="email"]:focus {
		border-color: var(--link-focus, #d4ab28);
		box-shadow: 0 0 0 1px var(--link-focus, #d4ab28);
	}

	:root:not([data-theme="light"]) .wp-core-ui .button-primary {
		background: var(--primary-light, #3d3d5c);
		border-color: var(--primary, #1a1a2e);
		color: var(--text-inverse, #fcfcfc);
	}

	:root:not([data-theme="light"]) .wp-core-ui .button-primary:hover,
	:root:not([data-theme="light"]) .wp-core-ui .button-primary:focus {
		background: var(--primary, #1a1a2e);
		border-color: var(--primary-dark, #0d0d17);
	}

	:root:not([data-theme="light"]) .login #backtoblog a,
	:root:not([data-theme="light"]) .login #nav a {
		color: var(--link-primary, #3d3d5c);
	}

	:root:not([data-theme="light"]) .login #backtoblog a:hover,
	:root:not([data-theme="light"]) .login #nav a:hover {
		color: var(--link-hover, #9fb088);
	}

	:root:not([data-theme="light"]) .login .message,
	:root:not([data-theme="light"]) .login .success {
		border-left-color: var(--brand-sage-dark, #a8c195);
		background-color: var(--success-alpha, rgba(168, 193, 149, 0.1));
		color: var(--text-primary, #fcfcfc);
	}

	:root:not([data-theme="light"]) .login #login_error {
		border-left-color: var(--brand-terracotta-dark, #d4615f);
		background-color: var(--error-alpha, rgba(212, 97, 95, 0.1));
		color: var(--text-primary, #fcfcfc);
	}

	:root:not([data-theme="light"]) .login label {
		color: var(--text-secondary, #d4d4d4);
	}

	:root:not([data-theme="light"]) .login .privacy-policy-page-link a {
		color: var(--text-tertiary, #a3a3a3);
	}

	:root:not([data-theme="light"]) #login h1 a,
	:root:not([data-theme="light"]) .login h1 a {
		filter: brightness(1.2);
	}

}