:root {
  --rg-login-paper: #f3f5f7;
  --rg-login-soft: #e8edf1;
  --rg-login-ink: #1c2733;
  --rg-login-blue: #586b7d;
  --rg-login-volt: #c6f432;
}

body.login {
  --rga-paper: var(--rg-login-paper);
  --rga-ink: var(--rg-login-ink);
  --rga-muted: #475666;
  --rga-orange: var(--rg-login-volt);
  background: var(--rg-login-paper);
  background-image: none;
  color: var(--rg-login-ink);
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.login #login h1 a {
  width: min(360px, 100%);
  height: clamp(76px, 22vw, 120px);
  margin-inline: auto;
  border-radius: 0;
  background-color: transparent;
  background-image: url("../images/brand/rawgravel-logo-neon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
}
body.login #loginform,
body.login #registerform,
body.login #lostpasswordform,
body.login .message,
body.login #login_error {
  border-color: rgba(28, 39, 51, .12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 48px -28px rgba(28, 39, 51, .4);
}
body.login #login form .button-primary,
body.login .language-switcher .button {
  border: 1.5px solid var(--rg-login-volt);
  border-radius: 999px;
  clip-path: none;
  background: var(--rg-login-volt);
  color: var(--rg-login-ink);
  box-shadow: 0 12px 26px -14px rgba(120, 160, 0, .8);
}
body.login #login form .button-primary:hover,
body.login #login form .button-primary:focus-visible,
body.login .language-switcher .button:hover,
body.login .language-switcher .button:focus-visible {
  border-color: var(--rg-login-ink);
  background: var(--rg-login-ink);
  color: var(--rg-login-volt);
}
body.login #login #nav,
body.login #login #backtoblog { color: var(--rg-login-blue); }
body.login #login #nav a,
body.login #login #backtoblog a,
body.login .privacy-policy-page-link a {
  border-radius: 6px;
  color: var(--rg-login-blue);
  text-decoration-color: var(--rg-login-volt);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
  transition: background-color .18s ease, color .18s ease;
}
body.login #login #nav a:hover,
body.login #login #nav a:focus-visible,
body.login #login #backtoblog a:hover,
body.login #login #backtoblog a:focus-visible,
body.login .privacy-policy-page-link a:hover,
body.login .privacy-policy-page-link a:focus-visible {
  background: var(--rg-login-volt);
  color: var(--rg-login-ink);
  box-shadow: 0 0 0 3px var(--rg-login-volt);
  outline: none;
}