/* sof-login.css — the login page's own layout. This system's foundation has
   no auth/centered-card scaffold (its patterns.css is built around the
   app-shell container/grid), so this composes one bespoke wrapper around
   the existing .card/.field/.input/.btn primitives, same var(--*)-only
   discipline as the rest of this track. Ported from the source's
   login-page/login-card/login-title/login-note structure in page.css. */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  /* --background (slate-2 light / slate-1 dark), not --secondary: the card is
     --card (white / slate-2), so the page must sit BELOW it on the ramp for the
     card to lift. On --secondary (slate-3) the dark card nearly dissolves. */
  background: var(--background);
}

.login-card {
  width: 100%;
  max-width: 22.5rem;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  /* .card ships --shadow-xs; an auth screen needs one clear focal card. */
  box-shadow: var(--shadow-md);
}

/* ── firm identity block ─────────────────────────────────────────────────── */
.login-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}

/* Brand mark — the product in one glyph: a traced path resolving from a single
   source (the teal dot) back to the funds. Deliberately not a consumer logo and
   not firm branding. Same glyph as favicon.svg, so the tab icon and the sign-in
   mark are one mark, not two. The white strokes are literal, not tokens: they
   sit on the --primary tile in both themes, never on the page background. */
.login-mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  display: block;
}
.login-mark__tile { fill: var(--primary); }
/* Literal, matching favicon.svg. NOT --primary-soft: that token is a 14%-alpha
   tint in dark (rgba(34,211,238,.14)) and would vanish against the teal tile.
   This dot only ever sits on --primary, so it has nothing to theme against. */
.login-mark__source { fill: #5eead4; }

.login-brand {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--foreground);
  line-height: var(--leading-tight);
}

.login-firm {
  font-size: var(--text-2xs);
  color: var(--muted-foreground);
  margin-top: 1px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-tight);
}

.login-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--foreground);
  margin: 0;
}

.login-sub {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  /* pull under the title: the flex gap is sp-4, this pair reads as one block */
  margin: calc(-1 * var(--sp-2)) 0 0;
  line-height: var(--leading-snug);
}

.login-btn { width: 100%; margin-top: var(--sp-1); }
.login-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.login-note {
  font-size: var(--text-2xs);
  color: var(--faint-foreground);
  line-height: var(--leading-snug);
  padding-top: var(--sp-3);
  border-top: var(--border-width) solid var(--border);
  margin-top: var(--sp-1);
}

/* Dark: shadows are weaker against a dark field — step the card lift up. */
[data-theme="dark"] .login-card { box-shadow: var(--shadow-lg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .login-card { box-shadow: var(--shadow-lg); }
}

/* Sign-in failure message. --danger-text, not --danger: the solid tier measures
   4.49:1 as text on --card in dark and fails AA by a hair; the text tier of the
   same family clears both themes. */
.login-err {
  margin: var(--sp-2) 0 0;
  min-height: 1rem;
  font-size: var(--text-xs);
  color: var(--danger-text);
}