/* Vastrid theme auth — isolated authentication surfaces (login, signup, reset) */

/* ── Auth semantic aliases (foundation tokens, not dashboard card surfaces) ── */

.auth-page {
  --auth-bg: var(--app-bg);
  --auth-surface: var(--surface-raised);
  --auth-input-bg: var(--input-bg);
  --auth-input-border: var(--border-strong);
  --auth-text: var(--text-primary);
  --auth-text-muted: var(--text-muted);
  --auth-link: var(--primary);
  --auth-link-hover: var(--primary-hover);
  --auth-shadow: var(--shadow);
  --auth-google-surface: var(--surface-raised);
  --auth-google-border: var(--border-strong);
  --auth-google-hover: var(--surface-hover);
}

/* ── Page shell ─────────────────────────────────────────────────────── */

html:has(.auth-page) {
  background: var(--auth-bg);
}

.auth-page {
  background: var(--auth-bg) !important;
  color: var(--auth-text);
}

/* ── Auth card ──────────────────────────────────────────────────────── */

.auth-card {
  background: var(--auth-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px var(--auth-shadow) !important;
  color: var(--auth-text);
}

/* ── Logo ───────────────────────────────────────────────────────────── */

.auth-logo {
  transition: filter 120ms ease;
}

[data-appearance="dark"] .auth-logo {
  filter: brightness(0) invert(1);
}

/* ── Inputs ─────────────────────────────────────────────────────────── */

.auth-input {
  background: var(--auth-input-bg) !important;
  border-color: var(--auth-input-border) !important;
  color: var(--auth-text) !important;
}

.auth-input::placeholder {
  color: var(--auth-text-muted);
  opacity: 0.85;
}

.auth-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--primary) 40%, var(--auth-input-border)) !important;
}

.auth-input:-webkit-autofill {
  -webkit-text-fill-color: var(--auth-text);
  box-shadow: 0 0 0 1000px var(--auth-input-bg) inset;
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.auth-btn--primary {
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: #ffffff !important;
}

.auth-btn--primary:hover:not(:disabled) {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.auth-btn--primary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.auth-btn--secondary {
  background-color: #111827 !important;
  border: 1px solid #111827 !important;
  color: #ffffff !important;
}

.auth-btn--secondary:hover:not(:disabled) {
  background-color: #1f2937 !important;
  border-color: #1f2937 !important;
}

.auth-btn--secondary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

[data-appearance="dark"] .auth-btn--secondary {
  background-color: var(--surface-muted) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

[data-appearance="dark"] .auth-btn--secondary:hover:not(:disabled) {
  background-color: var(--surface-hover) !important;
}

.auth-btn--google {
  background: var(--auth-google-surface) !important;
  border: 1px solid var(--auth-google-border) !important;
  color: var(--auth-text) !important;
}

.auth-btn--google:hover:not(:disabled) {
  background: var(--auth-google-hover) !important;
}

.auth-btn--google:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Links + status ─────────────────────────────────────────────────── */

.auth-link {
  color: var(--auth-link) !important;
}

.auth-link:hover {
  color: var(--auth-link-hover) !important;
}

.auth-status {
  color: var(--auth-text-muted) !important;
}

/* ── Tailwind utility overrides (auth scope only) ───────────────────── */

.auth-page .text-gray-600,
.auth-page .text-gray-700 {
  color: var(--text-secondary) !important;
}

.auth-page .text-blue-600 {
  color: var(--auth-link) !important;
}

.auth-page .bg-gray-50 {
  background-color: var(--auth-bg) !important;
}

.auth-page .bg-white {
  background-color: var(--auth-surface) !important;
}

.auth-page .bg-blue-600 {
  background-color: var(--primary) !important;
}

.auth-page .bg-gray-800 {
  background-color: #111827 !important;
}

[data-appearance="dark"] .auth-page .bg-gray-800 {
  background-color: var(--surface-muted) !important;
}

/* ── Theme isolation: dashboard chrome must not style auth controls ─── */

.auth-page .glass-card,
.auth-page .themed-hover-card,
.auth-page .dashboard-vnext__card {
  all: revert;
}