/* The login and registration screens use the blue Orleu-RK brand palette. */
.shell > .intro,
.shell > .auth-card {
  --ink: #17304d;
  --muted: #5f748a;
  --line: #d8e3ef;
  --accent: #1257b0;
  --forest: #1257b0;
  --mint: #e6efff;
}

.shell > .intro {
  background: linear-gradient(145deg, #f7faff 0%, #edf4ff 65%, #e4eeff 100%);
  color: #13365e;
  border-right: 1px solid #d8e3ef;
}

.intro::after {
  border-color: rgba(18, 87, 176, .12);
  box-shadow: 0 0 0 48px rgba(18, 87, 176, .035),
              0 0 0 100px rgba(18, 87, 176, .025);
  pointer-events: none;
}

.intro .brand { color: #1257b0; }
.intro .eyebrow,
.auth-card .eyebrow { color: #1257b0; }
.intro .lead { color: #526c87; }
.intro .topics span {
  background: rgba(255, 255, 255, .65);
  border-color: #c1d5ee;
  color: #30577e;
}
.intro .language-note { color: #526c87; }

.shell > .auth-card { color: #17304d; }
.auth-card .locale .active { background: #eaf2ff; color: #1257b0; }
.auth-card .tab.active { color: #1257b0; border-color: #1257b0; }
.auth-card .primary { background: #1257b0; }
.auth-card .primary:hover { background: #0e478e; }
.auth-card input:focus,
.auth-card select:focus {
  outline: none;
  border-color: #1257b0;
  box-shadow: 0 0 0 3px rgba(18, 87, 176, .12);
}
.auth-card .support a { color: #1257b0; }
.auth-card .back-home { color: #526c87; }
.auth-card .success-icon { background: #e6efff; color: #1257b0; }
.auth-card button:focus-visible,
.auth-card a:focus-visible,
.intro a:focus-visible { outline: 3px solid #719dea; outline-offset: 4px; }

@media (max-width: 780px) {
  .shell > .intro { border-right: 0; border-bottom: 1px solid #d8e3ef; }
}