/* 420 Plugins — Auth (wp-login + lost/reset password) */
/* Uses tokens from global.css */

:root {
  /* fallback if a token is missing */
  --auth-card: var(--card, #0f1316);
  --auth-border: #2a2f34;
  --auth-input: #12171b;
  --auth-muted: var(--muted, #9aa4ad);
}

/* Center the auth UI and unify the background */
body.login {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--bg, #0b0f12);
  color: var(--text, #e9eef3);
}

/* Container width */
body.login #login {
  width: min(440px, 92vw);
  margin: 0;        /* WP adds a big top margin; reset for true centering */
}

/* Brand the top logo */
body.login .wp-login-logo { margin-bottom: 14px; }
body.login .wp-login-logo a {
  display: block;
  width: 86px;
  height: 86px;
  margin-inline: auto;
  text-indent: -9999px;
  overflow: hidden;
  background: url("/wp-content/uploads/Logos/420%20Plugins%20Purple%20Balloon%20Logo.png") center/contain no-repeat;
  border-radius: 16px;
  outline: 1px solid #2a3036;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

/* Card */
body.login form {
  background: var(--auth-card);
  border: 1px solid var(--auth-border);
  border-radius: 16px;
  box-shadow: var(--shadow, 0 18px 50px rgba(0,0,0,.32));
  padding: 18px;
}

/* Labels + inputs */
body.login label { color: #e9eef6; font-weight: 800; letter-spacing: .2px; }
body.login .input,           /* user_login etc. */
body.login input[type="password"],
body.login input[type="text"] {
  background: var(--auth-input);
  border: 1px solid #2f353b;
  color: var(--text, #e9eef3);
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
  box-shadow: none;
}
body.login .input:focus,
body.login input[type="password"]:focus,
body.login input[type="text"]:focus {
  border-color: var(--brand-2, #b14fff);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand-2, #b14fff) 35%, transparent),
    0 0 26px color-mix(in srgb, var(--brand-2, #b14fff) 35%, transparent);
}

/* Notices (info / errors) */
body.login .message,
body.login .notice,
body.login .error {
  border-radius: 12px;
  border: 1px solid #3a2a45 !important;
  background: rgba(177,79,255,.08);
  color: #f1e9ff;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}

/* Primary button → brand pill */
body.login .button-primary {
  background: linear-gradient(180deg, #b14fff, #8a54ff);
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  text-shadow: none;
  box-shadow: 0 8px 24px rgba(177,79,255,.35);
}
body.login .button-primary:hover,
body.login .button-primary:focus {
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(177,79,255,.42);
}

/* Secondary links */
body.login #nav,
body.login #backtoblog { text-align: center; }
body.login #nav a,
body.login #backtoblog a {
  color: var(--auth-muted);
  text-decoration: none;
}
body.login #nav a:hover,
body.login #backtoblog a:hover { color: #fff; }

/* Make help text readable */
body.login .description,
body.login .hint { color: var(--auth-muted); }