/* ============================================================================
   Framer login page.
   Replaces the old standalone light-only design (a #667eea -> #764ba2 purple
   gradient on a white card) with the shared token system, so this page now
   themes with the rest of the app instead of contradicting it.
   ============================================================================ */

body.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(130% 100% at 50% -10%,
              var(--brand-wash) 0%, var(--surface-base) 55%) fixed;
}

.login-card {
  max-width: 400px;
  width: 100%;
  padding: 2rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.login-header { text-align: center; margin-bottom: 2rem; }
.login-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
  margin: 0;
}
.login-header p { color: var(--text-secondary); margin: .5rem 0 0; }

.divider {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  color: var(--text-muted);
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-subtle);
}
.divider span { padding: 0 1rem; font-size: .875rem; }

.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .75rem;
  margin-bottom: .75rem;
  border-radius: var(--radius-md);
  font-weight: 500;
}

/* Third-party brand colours - deliberately NOT tokenised. These are other
   companies' identities and must not shift with our palette. */
.btn-google   { background: #4285f4; color: #fff; border: none; }
.btn-google:hover   { background: #357ae8; color: #fff; }
.btn-azure    { background: #0078d4; color: #fff; border: none; }
.btn-azure:hover    { background: #006abc; color: #fff; }
.btn-keycloak { background: #008aaa; color: #fff; border: none; }
.btn-keycloak:hover { background: #00728c; color: #fff; }
.btn-github   { background: #24292e; color: #fff; border: none; }
.btn-github:hover   { background: #1a1e22; color: #fff; }

/* GitHub's near-black disappears against a dark surface, so use their own
   inverted treatment there. */
[data-theme="dark"] .btn-github       { background: #f6f8fa; color: #24292e; }
[data-theme="dark"] .btn-github:hover { background: #e6eaef; color: #24292e; }