/* =============================================================
   INDEX (login) page — migrated to the token system (tokens.css + base.css)
   -------------------------------------------------------------
   LIGHT skin — the default :root, so there is no data-theme on <body>.
   This is the standalone entry page: it has no shared header / nav /
   gear chrome, so styles.css is intentionally NOT linked.

   The reset, body typography, form fields (.field / label / .input),
   the gradient hero title (.display-title), the mono eyebrow
   (.data-label) and the primary button (.btn .btn-primary .btn-lg)
   are all SHARED components from base.css — not re-declared here.
   Only the centered login layout + the ambient backdrop live below,
   scoped under body.login-page and driven entirely by tokens.

   Replaces the ~150-line inline <style> block that previously lived
   in index.html (its private dark palette + bespoke form styling).
   ============================================================= */

/* ── page shell + ambient backdrop ──────────────────────────── */
body.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  position: relative;
  background:
    radial-gradient(
      900px 620px at 18% -5%,
      color-mix(in srgb, var(--brand) 16%, transparent),
      transparent 60%
    ),
    radial-gradient(
      820px 600px at 86% 105%,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 60%, var(--bg) 100%);
}
/* faint grid wash — the shared projects/dashboard ambient pattern,
   inverted for a light surface (dark hairlines instead of white). */
body.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text-color) 4%, transparent) 1px, transparent 1px),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--text-color) 4%, transparent) 1px,
      transparent 1px
    );
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 80%);
}

/* ── centered column (masthead + form card) ─────────────────── */
body.login-page .login-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── masthead (icon · suite · wordmark · subtitle) ──────────── */
body.login-page .login-masthead {
  text-align: center;
  margin-bottom: var(--space-5);
}
body.login-page .login-icon {
  display: inline-flex;
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent));
}
body.login-page .login-icon img {
  display: block;
  border-radius: var(--radius-lg);
}
body.login-page .login-suite {
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
/* gradient wordmark — the shared .display-title, sized down for the
   centered card (its native clamp is hero-scale). */
body.login-page .login-title {
  font-size: var(--text-3xl);
  line-height: 1;
  margin-bottom: var(--space-2);
}
body.login-page .login-subtitle {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  max-width: 22rem;
  margin: 0 auto;
}

/* ── form card (reuses base .panel) ─────────────────────────── */
body.login-page .login-form {
  width: 100%;
}
body.login-page .login-form .field:last-of-type {
  margin-bottom: var(--space-4);
}
body.login-page .login-submit {
  width: 100%;
}
body.login-page .login-error {
  min-height: 1.2rem;
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--danger);
}
body.login-page .login-error:empty {
  margin-top: 0;
}
body.login-page .login-forgot {
  display: block;
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
body.login-page .login-forgot:hover {
  color: var(--accent);
}

/* ── fixed tagline footer ───────────────────────────────────── */
body.login-page .login-tagline {
  position: fixed;
  bottom: var(--space-5);
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  body.login-page {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }
  body.login-page .login-title {
    font-size: var(--text-2xl);
  }
  body.login-page .login-tagline {
    bottom: var(--space-4);
  }
}
