/*
 * Brand identity of the authentication pages (roadmap Task 2.4).
 *
 * Loaded only by the shadow templates of the login and signup pages, through the ``app-css`` block
 * the shadow ``users/new-ui/user_base.html`` provides inside ``{% block head %}``. Upstream's
 * ``login.css`` and ``main.css`` are never edited: every rule below overrides an upstream rule by
 * the same-or-higher specificity and by source order (this sheet is linked after ``login.css``),
 * and every literal colour lives in the variables at the top, so the platform's primary colour
 * exists exactly once in this repository.
 *
 * Scope is deliberately the authentication pages only (``.login_page_new_ui`` and its descendants).
 * A platform-wide theme -- including the reference implementation's change of the global
 * ``--color-sand-100`` token -- is Phase 7 work and will grow its own mechanism, not widen this
 * file's selectors.
 */

.login_page_new_ui {
  /* Brand palette: the reference deployment's purple, named once. */
  --brand-primary: #8000ff;
  --brand-primary-hover: #6b00d6;
  --brand-on-primary: #ffffff;
}

/* Left half: the reference implementation's photo background instead of the upstream gradient. */
.login_page_new_ui .left {
  background-image: url('login-bg.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  justify-content: flex-start;
  padding-top: 48px;
}

/* Upstream decorations that assume the gradient (corner illustration, marketing copy) are gone
   from the shadow template; the brand title image replaces the upstream SVG logo. */
.login_page_new_ui .left:after {
  content: none;
}

.login_page_new_ui .brand-title img {
  width: min(414px, 80%);
  height: auto;
}

.login_page_new_ui .right .form-wrapper {
  background-color: #fff;
  padding-bottom: 60px;
}

.login_page_new_ui .form-title-image img {
  width: 100%;
  height: auto;
}

.login_page_new_ui .page-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brand-primary);
}

.login_page_new_ui .login-button {
  background: var(--brand-primary);
  border-radius: 4px;
}

.login_page_new_ui .login-button:hover {
  background: var(--brand-primary-hover);
}

/* The signup page's submit button (upstream class; overridden here, not edited in login.css). */
.login_page_new_ui .lsf-button-ls_look_primary {
  background: var(--brand-primary);
  border-radius: 4px;
}