/**
 * blckbrd Login — presentation of wp-login.php
 *
 * Canonical source of the design tokens: the design blueprint
 * (wp-content/common/design-system/src/styles/theme.css), implemented
 * by the theme at theme/blckbrd/src/styles/theme.css since the
 * THEME_ALIGNMENT Wave 0 sync (semantic split: --primary = charcoal,
 * --accent = blue; secondary/muted = surfaces; --ring exists now).
 *
 * wp-login.php does NOT load the theme's stylesheet, so the token layer
 * is re-declared verbatim here. Values are copied 1:1 from the theme —
 * nothing is invented. The two-layer structure is mirrored exactly: the
 * dark media query overrides only the --color-* values, and the
 * short-form aliases cascade automatically, identical to the theme.
 *
 * KNOWN LIMITATION: these tokens are duplicated from the theme.
 * Post-POC, extract them to a single shared stylesheet imported by both
 * the theme and this plugin. Logged in 04_BACKLOG.md §4.
 *
 * NOTE: the theme self-hosts Inter (assets/fonts/); this plugin keeps
 * the system fallback stack — no cross-component asset dependency and
 * no remote @import by policy.
 *
 * @package Blckbrd_Login
 */

:root {
	/* Brand primitives — theme.css @theme inline */
	--color-blckbrd-deep-charcoal:    #1C1C1E;
	--color-blckbrd-soft-charcoal:    #2C2C2E;
	--color-blckbrd-warm-grey:        #52525B;
	--color-blckbrd-soft-grey:        #A1A1AA;
	--color-blckbrd-off-white:        #F7F7F5;
	--color-blckbrd-warm-white:       #FAFAF9;
	--color-blckbrd-accent:           #2563EB;
	--color-blckbrd-accent-soft:      #60A5FA;
	--color-blckbrd-destructive:      #DC2626;
	--color-blckbrd-destructive-soft: #EF4444;

	/* Semantic aliases — light (theme.css, Wave-0 canon) */
	--color-background:         var(--color-blckbrd-warm-white);
	--color-foreground:         var(--color-blckbrd-deep-charcoal);
	--color-card:               #FFFFFF;
	--color-accent:             var(--color-blckbrd-accent);
	--color-accent-foreground:  #FFFFFF;
	--color-muted-foreground:   var(--color-blckbrd-warm-grey);
	--color-border:             rgba(0, 0, 0, 0.06);
	--color-input-background:   var(--color-blckbrd-off-white);
	--color-ring:               rgba(37, 99, 235, 0.2);
	--color-destructive:        var(--color-blckbrd-destructive);

	/* Short-form aliases — utilities.css */
	--background:         var(--color-background);
	--foreground:         var(--color-foreground);
	--card:               var(--color-card);
	--accent:             var(--color-accent);
	--accent-foreground:  var(--color-accent-foreground);
	--muted-foreground:   var(--color-muted-foreground);
	--border:             var(--color-border);
	--input-background:   var(--color-input-background);
	--ring:               var(--color-ring);
	--destructive:        var(--color-destructive);

	/* Typography + radii + elevation (theme.css) */
	--font-blckbrd-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--radius:      6px;
	--radius-lg:   8px;
	--radius-xl:   12px;
	--shadow-soft: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

@media (prefers-color-scheme: dark) {
	/* Dark overrides — theme.css. Only the --color-* values flip; the
	 * short-form aliases cascade. */
	:root {
		--color-background:        #0F1115;
		--color-foreground:        #E4E4E7;
		--color-card:              #18181B;
		--color-accent:            var(--color-blckbrd-accent-soft);
		--color-accent-foreground: #18181B;
		--color-muted-foreground:  var(--color-blckbrd-soft-grey);
		--color-border:            rgba(255, 255, 255, 0.08);
		--color-input-background:  #27272A;
		--color-ring:              rgba(96, 165, 250, 0.3);
		--color-destructive:       var(--color-blckbrd-destructive-soft);
	}
}

/* Page background + base text */
body.login {
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-blckbrd-sans);
}

/* Logo — fixed two-tone blckbrd mark (dark square + white bird), colors
 * baked into the SVG. Rendered as a plain background-image (no mask, no
 * background-color): the bird is white by brand definition and must NOT
 * be recolored. The dark square (#0F1115) matches the dark login
 * background, so it blends there and frames the white bird on the light
 * background. 48px per the blueprint's auth brand-presence rule
 * (06 §6.2 — mark above the form heading). */
.login h1 a {
	background-image: url('../img/logo.svg') !important;  /* override WP default logo */
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 48px;
	height: 48px;
	margin: 0 auto 16px;
	text-indent: -9999px;
	overflow: hidden;
}

/* The login card (form container) — the app card canon: white surface,
 * 1px token border, 12px radius, soft elevation. */
.login form {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
}

/* Labels */
.login form label {
	color: var(--foreground);
}

/* Inputs */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: var(--input-background);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

/* Input focus — the canonical focus ring (--ring exists since the
 * Wave-0 token sync; previously approximated with the accent). */
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--ring);
	outline: none;
}

/* Primary button — the accent surface with its own foreground (dark
 * mode gets dark-on-light-blue, matching the app). */
.login .button-primary,
.wp-core-ui .button-primary {
	background: var(--accent);
	color: var(--accent-foreground);
	border: none;
	border-radius: var(--radius);
	text-shadow: none;
	box-shadow: none;
}

.login .button-primary:hover,
.login .button-primary:focus,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--accent);
	color: var(--accent-foreground);
	opacity: 0.92;
}

/* Secondary links (below the form) */
.login #nav a,
.login #backtoblog a {
	color: var(--muted-foreground);
}

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

/* Remember me */
.login .forgetmenot label {
	color: var(--muted-foreground);
}

/* Success / info messages and login errors */
.login .message,
.login .success,
.login #login_error {
	background: var(--card);
	color: var(--foreground);
	border-left-color: var(--accent);
	border-radius: var(--radius);
}

.login #login_error {
	border-left-color: var(--destructive);
}