/* Portal accents are scoped to login screens; workspace colors stay consistent. */
.login-body {
  --login-start: #1d4e91;
  --login-end: #142b50;
  --login-accent: #a8d2ff;
  --login-soft: #edf4ff;
  --login-ink: #245ca4;
  --login-hover: #194981;
  --login-muted: #c2d5ef;
  --login-focus: #639ee7;
  background: var(--login-soft);
}
.login-body.sales-login {
  --login-start: #166b70;
  --login-end: #123e49;
  --login-accent: #9ce3d9;
  --login-soft: #edf8f6;
  --login-ink: #17676b;
  --login-hover: #105357;
  --login-muted: #bfdfdf;
  --login-focus: #3b9d99;
}
.login-body.department-login {
  --login-start: #654b8c;
  --login-end: #322b54;
  --login-accent: #d7c4f5;
  --login-soft: #f5f1fb;
  --login-ink: #6a4794;
  --login-hover: #523573;
  --login-muted: #d7cbe9;
  --login-focus: #9670c3;
}
.login-body.rm-login {
  --login-start: #38495b;
  --login-end: #1d2e40;
  --login-accent: #f0cf94;
  --login-soft: #faf6ef;
  --login-ink: #805a25;
  --login-hover: #65451b;
  --login-muted: #d9d7cf;
  --login-focus: #b28a4c;
}
.login-body.customer-login {
  --login-start: #246c83;
  --login-end: #173e5a;
  --login-accent: #afe6ee;
  --login-soft: #eff8fb;
  --login-ink: #24677f;
  --login-hover: #1a5065;
  --login-muted: #c5e1eb;
  --login-focus: #4b9bb1;
}
.login-body .login-story {
  background: linear-gradient(145deg, var(--login-start), var(--login-end));
}
.login-body .login-story .brand-mark {
  background: var(--login-accent);
  color: var(--login-end);
}
.login-body .login-story h1 em { color: var(--login-accent); }
.login-body .login-story .brand-light,
.login-body .login-story > .eyebrow,
.login-body .login-story p,
.login-body .story-bottom { color: var(--login-muted); }
.login-body .story-bottom .status-dot { background: var(--login-accent); }
.login-body .welcome-icon { background: var(--login-soft); color: var(--login-ink); }
.login-body .login-top,
.login-body .portal-link a,
.login-body .password-wrap button { color: var(--login-ink); }
.login-body .login-form .button { background: var(--login-ink); color: #fff; }
.login-body .login-form .button:hover { background: var(--login-hover); }
.login-body :is(button, a, input):focus-visible { outline-color: var(--login-focus); }
.login-body .login-form input:focus-visible { border-color: var(--login-focus); }
@media (max-width: 600px) {
  .login-body { background: #fff; }
}