/**
 * Login-garage theme — product palette (login page only, scoped under .login-shell):
 *   #020659 deep navy   #0C2840 ink navy   #2C5773 steel blue
 *   #D95A2B orange      #0D0D0D near-black
 *
 * Layout: dark page gradient; light card; light input fields + deep text; orange CTA unchanged.
 */

.login-shell {
  --login-p-deep: #020659;
  --login-p-ink: #0c2840;
  --login-p-steel: #2c5773;
  --login-p-orange: #d95a2b;
  --login-p-black: #0d0d0d;

  --login-brand-orange: var(--login-p-orange);
  --login-brand-orange-hover: color-mix(in srgb, var(--login-p-orange) 78%, var(--login-p-black) 22%);
  --login-brand-navy: var(--login-p-deep);
  --login-brand-slate: var(--login-p-steel);

  /* Dark atmosphere behind the card (palette-only, no white wash). */
  --login-brand-page-bg-top: var(--login-p-deep);
  --login-brand-page-bg-mid: var(--login-p-ink);
  --login-brand-page-bg-bottom: color-mix(in srgb, var(--login-p-black) 55%, var(--login-p-ink) 45%);

  /* Light fields on the card */
  --login-field-bg: color-mix(in srgb, #ffffff 94%, var(--login-p-steel) 6%);
  --login-field-border: color-mix(in srgb, var(--login-p-steel) 32%, #ffffff 68%);
  --login-field-text: var(--login-p-deep);
  --login-field-placeholder: color-mix(in srgb, var(--login-p-steel) 62%, var(--login-p-deep) 38%);

  --accent: var(--login-brand-orange);
  --accent-hover: var(--login-brand-orange-hover);
  --text-on-accent: #ffffff;
  --text: var(--login-p-deep);
  --text-muted: color-mix(in srgb, var(--login-p-steel) 62%, var(--login-p-deep) 38%);
  --border: color-mix(in srgb, var(--login-p-steel) 22%, #ffffff 78%);
  --border-focus: var(--login-brand-orange);
  --bg-surface: #ffffff;
  --logo-filter: none;

  color: var(--text);
  background: linear-gradient(
    165deg,
    var(--login-brand-page-bg-top) 0%,
    var(--login-brand-page-bg-mid) 48%,
    var(--login-brand-page-bg-bottom) 100%
  );
}

/* Logo sits on the white card; no outer glow (that was for the old layout above the card). */
.login-shell .landing-auth .login-logo,
.login-shell .forgot-form .login-logo {
  filter: none;
}

.login-shell .landing-auth.card,
.login-shell .forgot-form.card {
  color: var(--text);
  background-color: var(--bg-surface);
  border: 1px solid color-mix(in srgb, #ffffff 14%, var(--login-p-steel) 86%);
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--login-p-black) 28%, transparent),
    0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent);
}

.login-shell .login-brand-head {
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--login-p-steel) 18%, #ffffff 82%);
  text-align: center;
}

.login-shell .login-brand-head__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--login-p-deep);
  line-height: 1.25;
}

.login-shell .login-brand-head__subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.login-shell .login-card-lang {
  justify-content: center;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--login-p-steel) 16%, #ffffff 84%);
}

.login-shell .input,
.login-shell .select,
.login-shell .textarea {
  background-color: var(--login-field-bg);
  color: var(--login-field-text);
  border-color: var(--login-field-border);
}

.login-shell .input::placeholder,
.login-shell .textarea::placeholder {
  color: var(--login-field-placeholder);
}

.login-shell .input:focus,
.login-shell .select:focus,
.login-shell .textarea:focus {
  outline-color: var(--login-p-orange);
}

.login-shell .btn--ghost {
  border-color: color-mix(in srgb, var(--login-p-steel) 42%, transparent);
  color: var(--login-p-deep);
}

.login-shell .btn--ghost:hover {
  border-color: var(--login-field-border);
  background-color: color-mix(in srgb, var(--login-p-steel) 10%, #ffffff 90%);
}

.login-shell .login-forgot {
  color: color-mix(in srgb, var(--login-p-orange) 90%, var(--login-p-deep) 10%);
}

.login-shell .login-forgot:hover {
  color: var(--login-brand-orange-hover);
}

.login-shell .text-link {
  color: color-mix(in srgb, var(--login-p-orange) 90%, var(--login-p-deep) 10%);
}

.login-shell .text-link:hover {
  color: var(--login-brand-orange-hover);
}