:root,
[data-bs-theme="dark"] {
  --bs-body-bg: #111827;
  --bs-body-color: #e5e7eb;
  --bs-border-color: rgba(255, 255, 255, 0.12);
  --bs-card-bg: #1f2937;
  --bs-card-color: #e5e7eb;
  --bs-card-border-color: rgba(255, 255, 255, 0.12);

  --playnest-accent-strong: #3b82f6;
}

body {
  background:
    radial-gradient(circle at top left, rgba(76, 142, 249, 0.18), transparent 30rem),
    #111827;
  color: #e5e7eb;
}

.login-body {
  min-height: 100vh;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.login-card {
  width: min(100%, 26rem);
  background: #1f2937;
  border-color: rgba(255, 255, 255, 0.12);
}

.app-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #f9fafb;
}

.alert {
  border-radius: 0.5rem;
  border-width: 1px;
  color: #e5e7eb;
  background: #1f2937;
}

.alert-warning {
  color: #fde68a;
  background: #2d2614;
  border-color: rgba(250, 204, 21, 0.34);
}

.alert-danger {
  color: #fecaca;
  background: #32191d;
  border-color: rgba(248, 113, 113, 0.34);
}

.btn {
  border-radius: 0.5rem;
  font-weight: 650;
}

.btn-primary {
  --bs-btn-color: #f9fafb;
  --bs-btn-bg: var(--playnest-accent-strong);
  --bs-btn-border-color: rgba(147, 197, 253, 0.55);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #2563eb;
  --bs-btn-hover-border-color: #93c5fd;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #1d4ed8;
  --bs-btn-active-border-color: #bfdbfe;
  box-shadow: 0 0.45rem 1.2rem rgba(37, 99, 235, 0.2);
}

.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.28);
}