/* Baresha Design System — authentication, access, error, and offline surfaces */
body.bn-auth,
body.bn-system {
  min-width: 20rem;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bn-bg-app);
  color: var(--bn-text-primary);
  font-family: var(--bn-font-family-sans);
}

body.bn-auth {
  padding-top: max(var(--bn-space-4), env(safe-area-inset-top));
  padding-right: max(var(--bn-space-4), env(safe-area-inset-right));
  padding-bottom: max(var(--bn-space-4), env(safe-area-inset-bottom));
  padding-left: max(var(--bn-space-4), env(safe-area-inset-left));
}

body.bn-auth .auth-page {
  min-height: calc(100dvh - max(var(--bn-space-8), env(safe-area-inset-top) + env(safe-area-inset-bottom)));
}

body.bn-auth .card,
body.bn-system .card,
body.bn-system .denied-card {
  border-color: var(--bn-border-default);
  background: var(--bn-bg-surface-raised);
  color: var(--bn-text-primary);
  box-shadow: var(--bn-shadow-lg);
}

body.bn-auth :where(.card-title, .step-content strong),
body.bn-system :where(h1, .logo-text, .value),
body.bn-system .denied-card h1 {
  color: var(--bn-text-primary);
}

body.bn-auth :where(.card-description, .card-footer),
body.bn-system :where(.subtitle, .footer, .label),
body.bn-system .denied-card .lead {
  color: var(--bn-text-muted);
}

body.bn-auth :where(.input, input[type="text"], input[type="number"], input[type="password"]) {
  min-height: var(--bn-control-height-lg);
  border-color: var(--bn-control-border);
  border-radius: var(--bn-radius-md);
  background: var(--bn-control-bg);
  color: var(--bn-text-primary);
  box-shadow: var(--bn-shadow-xs);
}

body.bn-auth :where(.input, input[type="text"], input[type="number"], input[type="password"]):focus-visible {
  border-color: var(--bn-border-focus);
  outline: 2px solid var(--bn-border-focus);
  outline-offset: 2px;
  box-shadow: var(--bn-focus-ring);
}

body.bn-auth :where(.btn, button),
body.bn-system :where(.btn, .retry, .btn-denied) {
  min-height: var(--bn-touch-target);
  border-radius: var(--bn-radius-md);
  font-family: inherit;
  font-weight: var(--bn-font-weight-semibold);
}

body.bn-auth :where(.btn-primary, button[type="submit"]),
body.bn-system :where(.btn-primary, .retry, .btn-denied-primary) {
  border-color: var(--bn-action-primary-bg);
  background: var(--bn-action-primary-bg);
  color: var(--bn-action-primary-text);
}

body.bn-auth :where(.btn-primary, button[type="submit"]):hover,
body.bn-system :where(.btn-primary, .retry, .btn-denied-primary):hover {
  border-color: var(--bn-action-primary-hover);
  background: var(--bn-action-primary-hover);
  color: var(--bn-action-primary-text);
}

body.bn-auth :where(.btn, button):focus-visible,
body.bn-system :where(.btn, .retry, .btn-denied):focus-visible,
body.bn-system summary:focus-visible {
  outline: 2px solid var(--bn-border-focus);
  outline-offset: 2px;
  box-shadow: var(--bn-focus-ring);
}

body.bn-auth .alert-destructive,
body.bn-system :where(.alert-warn, .notice) {
  border-color: var(--bn-status-danger-border);
  background: var(--bn-status-danger-bg);
  color: var(--bn-status-danger-text);
}

body.bn-auth .setup-step {
  border-color: var(--bn-border-muted);
  background: var(--bn-bg-surface-subtle);
}

body.bn-auth .setup-step:hover {
  border-color: var(--bn-border-default);
  background: var(--bn-bg-hover);
}

body.bn-auth .step-number {
  background: var(--bn-action-primary-bg);
  color: var(--bn-action-primary-text);
}

body.bn-auth :where(.secret-key, .qr-code, .remember-me-row, .recaptcha-container) {
  border-color: var(--bn-border-default);
  background: var(--bn-bg-surface-muted);
  color: var(--bn-text-primary);
}

body.bn-system .container {
  width: 100%;
}

body.bn-system :where(.item, .hint, .steps li::before, .denied-steps .n, .btn-soft, .btn-secondary, .btn-denied-soft) {
  border-color: var(--bn-border-default);
  background: var(--bn-bg-surface-muted);
  color: var(--bn-text-secondary);
}

body.bn-system :where(.header, .footer, .denied-tech, details.tech) {
  border-color: var(--bn-border-muted);
  background: var(--bn-bg-surface-subtle);
}

body.bn-system :where(.badge, .tag, .denied-pill, .icon-circle, .denied-icon) {
  border-color: var(--bn-status-danger-border);
  background: var(--bn-status-danger-bg);
  color: var(--bn-status-danger-text);
}

body.bn-system .status {
  border-color: var(--bn-border-default);
  color: var(--bn-text-muted);
}

body.bn-system .status-dot {
  background: var(--bn-status-danger-text);
}

body.bn-system.is-online .status-dot {
  background: var(--bn-status-success-text);
}

body.bn-system :where(.alert-ok) {
  border-color: var(--bn-status-success-border);
  background: var(--bn-status-success-bg);
  color: var(--bn-status-success-text);
}

body.bn-system :where(.alert-info, .notice) {
  border-color: var(--bn-status-info-border);
  background: var(--bn-status-info-bg);
  color: var(--bn-status-info-text);
}

@media (max-width: 575.98px) {
  body.bn-auth,
  body.bn-system {
    padding-top: max(var(--bn-space-3), env(safe-area-inset-top));
    padding-right: max(var(--bn-space-3), env(safe-area-inset-right));
    padding-bottom: max(var(--bn-space-3), env(safe-area-inset-bottom));
    padding-left: max(var(--bn-space-3), env(safe-area-inset-left));
  }

  body.bn-auth .card,
  body.bn-system .card,
  body.bn-system .denied-card {
    border-radius: var(--bn-radius-lg);
  }

  body.bn-auth .card {
    padding: var(--bn-space-5);
  }

  body.bn-auth .card-title {
    font-size: var(--bn-font-size-2xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bn-auth,
  body.bn-auth *,
  body.bn-system,
  body.bn-system * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}