/* WordPress's login and set-password screens in the site's type (D-125): parchment ground, the seal over the form,
   Merriweather for the heading, Merriweather Sans for labels and buttons, the one dark button. The theme's fonts.css
   and tokens.css are enqueued before this file, so the tokens are the design system's. The seal itself is set inline
   from the theme's folder. */
body.login {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
}
body.login #login {
  padding-top: 6vh;
}
body.login #login h1 a {
  width: 96px;
  height: 112px;
  background-size: contain;
  background-position: center;
  margin-bottom: 1.25rem;
}
body.login #loginform,
body.login #resetpassform,
body.login #lostpasswordform {
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  box-shadow: none;
  background: var(--paper);
  padding: 1.75rem 1.5rem 1.5rem;
}
body.login label {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}
body.login .message,
body.login .success,
body.login .notice {
  border-left-color: var(--accent-warm);
  background: var(--paper-deep);
  box-shadow: none;
  color: var(--ink-body);
  font-size: 0.95rem;
  line-height: 1.5;
}
body.login #login_error {
  border-left-color: var(--accent-warm);
  box-shadow: none;
}
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  padding: 0.5rem 0.6rem;
  box-shadow: none;
}
body.login #loginform input:focus,
body.login #resetpassform input:focus,
body.login #lostpasswordform input:focus,
body.login.wp-core-ui .button:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
/* The set-password screen: a resident is signed in and sent on the moment the password is saved, so the "Log in"
   link under the form only confuses; the strength meter keeps WordPress's colours, which say weak and strong. */
body.login-action-rp #nav,
body.login-action-resetpass #nav { display: none; }
body.login.wp-core-ui .button-primary,
body.login.wp-core-ui .button-primary:hover,
body.login.wp-core-ui .button-primary:focus {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--invert-ink);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-weight: 600;
  min-height: 44px;
  box-shadow: none;
  text-shadow: none;
}
body.login.wp-core-ui .button-primary:hover { background: var(--graphite); border-color: var(--graphite); }
body.login.wp-core-ui .button-secondary,
body.login.wp-core-ui .button.wp-generate-pw,
body.login.wp-core-ui .button.wp-hide-pw {
  color: var(--ink);
  border-color: var(--rule-strong);
  background: var(--paper);
  border-radius: 2px;
  font-family: var(--font-sans);
}
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
  color: var(--ink-muted);
}
body.login #nav a:hover,
body.login #backtoblog a:hover { color: var(--ink); }
body.login .language-switcher { display: none; }
body.login .pw-weak label { font-weight: 400; }