/* Shared authentication tokens: docs/auth-interface-contract.md.
   Explicit themes define tokens locally so they override system inheritance. */

:root,
[data-theme="light"] {
  /* Dimensions & Spacing */
  --auth-container-max-width: 480px;
  --auth-touch-target-min: 44px; /* SkiveCore project-standard touch target */
  --auth-radius-sm: 8px;
  --auth-radius-md: 12px;
  --auth-radius-lg: 16px;

  /* Typography */
  --auth-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --auth-font-size-sm: 0.875rem;
  --auth-font-size-base: 1rem;
  --auth-font-size-lg: 1.25rem;
  --auth-font-size-title: 1.75rem;

  /* Light Theme Colors (Default) */
  --auth-bg: #f8fafc;
  --auth-card-bg: #ffffff;
  --auth-card-border: #e2e8f0;
  --auth-card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);

  --auth-text-primary: #0f172a;
  --auth-text-secondary: #475569;
  --auth-text-muted: #64748b;

  --auth-input-bg: #ffffff;
  --auth-input-border: #cbd5e1;
  --auth-input-text: #0f172a;
  --auth-input-placeholder: #94a3b8;

  --auth-btn-primary-bg: #2563eb;
  --auth-btn-primary-text: #ffffff;
  --auth-btn-primary-hover: #1d4ed8;

  --auth-btn-secondary-bg: #f1f5f9;
  --auth-btn-secondary-text: #334155;
  --auth-btn-secondary-border: #cbd5e1;

  --auth-error: #dc2626;
  --auth-error-bg: #fef2f2;
  --auth-error-border: #fecaca;

  --auth-success: #16a34a;
  --auth-success-bg: #f0fdf4;
  --auth-success-border: #bbf7d0;

  /* Focus & Accessibility (Project standard: >=3px outline, 2px offset, >=3:1 contrast) */
  --auth-focus-ring: 3px solid #2563eb;
  --auth-focus-offset: 2px;
}


@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
  --auth-bg: #090d16;
  --auth-card-bg: #111827;
  --auth-card-border: #1f2937;
  --auth-card-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);

  --auth-text-primary: #f9fafb;
  --auth-text-secondary: #cbd5e1;
  --auth-text-muted: #94a3b8;

  --auth-input-bg: #1f2937;
  --auth-input-border: #374151;
  --auth-input-text: #f9fafb;
  --auth-input-placeholder: #6b7280;

  --auth-btn-primary-bg: #3b82f6;
  --auth-btn-primary-text: #ffffff;
  --auth-btn-primary-hover: #60a5fa;

  --auth-btn-secondary-bg: #1e293b;
  --auth-btn-secondary-text: #e2e8f0;
  --auth-btn-secondary-border: #334155;

  --auth-error: #ef4444;
  --auth-error-bg: rgba(239, 68, 68, 0.12);
  --auth-error-border: rgba(239, 68, 68, 0.35);

  --auth-success: #22c55e;
  --auth-success-bg: rgba(34, 197, 94, 0.12);
  --auth-success-border: rgba(34, 197, 94, 0.35);

  --auth-focus-ring: 3px solid #60a5fa;
    }
}

[data-theme="dark"],
body.dark {
  --auth-bg: #090d16;
  --auth-card-bg: #111827;
  --auth-card-border: #1f2937;
  --auth-card-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);

  --auth-text-primary: #f9fafb;
  --auth-text-secondary: #cbd5e1;
  --auth-text-muted: #94a3b8;

  --auth-input-bg: #1f2937;
  --auth-input-border: #374151;
  --auth-input-text: #f9fafb;
  --auth-input-placeholder: #6b7280;

  --auth-btn-primary-bg: #3b82f6;
  --auth-btn-primary-text: #ffffff;
  --auth-btn-primary-hover: #60a5fa;

  --auth-btn-secondary-bg: #1e293b;
  --auth-btn-secondary-text: #e2e8f0;
  --auth-btn-secondary-border: #334155;

  --auth-error: #ef4444;
  --auth-error-bg: rgba(239, 68, 68, 0.12);
  --auth-error-border: rgba(239, 68, 68, 0.35);

  --auth-success: #22c55e;
  --auth-success-bg: rgba(34, 197, 94, 0.12);
  --auth-success-border: rgba(34, 197, 94, 0.35);

  --auth-focus-ring: 3px solid #60a5fa;
}

/* Common components are confined to authentication surfaces. */
:is(.auth-page, .auth-card),
:is(.auth-page, .auth-card) *,
:is(.auth-page, .auth-card) *::before,
:is(.auth-page, .auth-card) *::after {
  box-sizing: border-box;
}

body:has(.auth-page) {
  margin: 0;
  background: var(--auth-bg);
  color: var(--auth-text-primary);
}

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px 12px;
  background: var(--auth-bg);
  color: var(--auth-text-primary);
  font-family: var(--auth-font-family);
  font-size: var(--auth-font-size-base);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.auth-card,
.auth-page .auth-card {
  width: 100%;
  min-width: 0;
  max-width: var(--auth-container-max-width);
  margin-inline: auto;
  padding: 24px 16px;
  border: 1px solid var(--auth-card-border);
  border-radius: var(--auth-radius-lg);
  background: var(--auth-card-bg);
  color: var(--auth-text-primary);
  box-shadow: none;
  font-family: var(--auth-font-family);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.auth-card > *,
.auth-card :is(form, .form-group, .form-input-wrapper, .form-actions, .auth-alternatives) {
  min-width: 0;
  max-width: 100%;
}

.auth-card .auth-header {
  margin-bottom: 24px;
  text-align: center;
}

.auth-card .auth-brand-logo {
  margin-bottom: 12px;
  color: var(--auth-text-primary);
  font-weight: 800;
  text-decoration: none;
}

.auth-card .auth-brand-logo :is(svg, img) {
  display: block;
  width: auto;
  max-width: 100%;
  height: 32px;
}

.auth-card .auth-title {
  margin: 0 0 8px;
  color: var(--auth-text-primary);
  font-size: var(--auth-font-size-title);
  line-height: 1.25;
}

.auth-card .auth-subtitle {
  margin: 0;
  color: var(--auth-text-secondary);
  font-size: var(--auth-font-size-base);
}

.auth-card .auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.auth-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: start;
}

.auth-card .form-label {
  color: var(--auth-text-primary);
  font-size: var(--auth-font-size-sm);
  font-weight: 600;
}

.auth-card .form-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-card .required-indicator {
  color: var(--auth-error);
}

.auth-card .form-input-wrapper {
  position: relative;
  width: 100%;
}

.auth-card .form-input {
  display: block;
  width: 100%;
  min-width: var(--auth-touch-target-min);
  min-height: var(--auth-touch-target-min);
  padding: 12px;
  border: 1px solid var(--auth-input-border);
  border-radius: var(--auth-radius-md);
  background: var(--auth-input-bg);
  color: var(--auth-input-text);
  font: inherit;
  font-size: var(--auth-font-size-base);
  line-height: 1.5;
}

.auth-card .form-input::placeholder {
  color: var(--auth-input-placeholder);
  opacity: 1;
}

.auth-card .has-trailing-action .form-input {
  min-height: calc(var(--auth-touch-target-min) + 12px);
  padding-inline-end: calc(var(--auth-touch-target-min) + 18px);
}

.auth-card .input-action-btn {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--auth-touch-target-min);
  min-height: var(--auth-touch-target-min);
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--auth-radius-sm);
  background: var(--auth-btn-secondary-bg);
  color: var(--auth-btn-secondary-text);
  font: inherit;
  cursor: pointer;
}

.auth-card .input-action-btn:hover:not(:disabled) {
  border-color: var(--auth-btn-secondary-border);
}

.auth-card :is(.form-hint, .form-error) {
  margin: 0;
  font-size: var(--auth-font-size-sm);
  line-height: 1.6;
}

.auth-card .form-hint {
  color: var(--auth-text-secondary);
}

/* Feedback text uses primary text contrast; its border carries the state color. */
.auth-card .form-error {
  padding-inline-start: 8px;
  border-inline-start: 3px solid var(--auth-error);
  color: var(--auth-text-primary);
}

.auth-card .form-input:is(.is-invalid, [aria-invalid="true"]) {
  border-color: var(--auth-error);
}

.auth-card :is(.form-actions, .auth-alternatives) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-card :is(.btn-auth-primary, .btn-auth-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: var(--auth-touch-target-min);
  min-height: var(--auth-touch-target-min);
  padding: 12px 16px;
  border: 1px solid var(--auth-btn-primary-bg);
  border-radius: var(--auth-radius-md);
  background: var(--auth-btn-primary-bg);
  color: var(--auth-btn-primary-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.auth-card .btn-auth-primary:hover:not(:disabled):not([aria-busy="true"]) {
  background: var(--auth-btn-primary-hover);
}

.auth-card .btn-auth-secondary {
  border-color: var(--auth-btn-secondary-border);
  background: var(--auth-btn-secondary-bg);
  color: var(--auth-btn-secondary-text);
}

.auth-card .btn-auth-secondary:hover:not(:disabled):not([aria-busy="true"]) {
  border-color: var(--auth-text-secondary);
  text-decoration: underline;
}

.auth-card :is(.btn-icon, .visibility-icon) {
  flex-shrink: 0;
}

.auth-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--auth-touch-target-min);
  min-height: var(--auth-touch-target-min);
  max-width: 100%;
  padding: 8px;
  border-radius: var(--auth-radius-sm);
  color: var(--auth-text-primary);
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-card .form-link:hover {
  background: var(--auth-btn-secondary-bg);
  color: var(--auth-btn-secondary-text);
}

.auth-card .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 24px;
  color: var(--auth-text-secondary);
  font-size: var(--auth-font-size-sm);
  text-align: center;
}

.auth-card .auth-divider::before,
.auth-card .auth-divider::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  background: var(--auth-card-border);
}

.auth-card .auth-divider > span {
  min-width: 0;
  max-width: 75%;
  padding: 0;
  font-size: inherit;
}

.auth-card .auth-alert {
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid var(--auth-card-border);
  border-radius: var(--auth-radius-md);
  color: var(--auth-text-primary);
  font-size: var(--auth-font-size-sm);
  line-height: 1.6;
}

.auth-card .auth-alert-error {
  border-color: var(--auth-error-border);
  background: var(--auth-error-bg);
}

.auth-card .auth-alert-success {
  border-color: var(--auth-success-border);
  background: var(--auth-success-bg);
}

.auth-card .auth-footer {
  display: block;
  margin-top: 24px;
  padding: 16px 0 0;
  border-top: 1px solid var(--auth-card-border);
  background: var(--auth-card-bg);
  color: var(--auth-text-secondary);
  font-family: inherit;
  font-size: var(--auth-font-size-sm);
  text-align: center;
}

.auth-card .auth-footer p {
  margin: 0;
}

:is(.auth-page, .auth-card) :focus-visible {
  outline: var(--auth-focus-ring);
  outline-offset: var(--auth-focus-offset);
}

.auth-card :is(input, button, select, textarea):disabled,
.auth-card [aria-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed;
}

.auth-card [aria-busy="true"],
.auth-card :is(input, button, select, textarea)[aria-busy="true"] {
  cursor: progress;
}

:is(.auth-page, .auth-card) [hidden],
.auth-card .hidden {
  display: none !important;
}

:is(.auth-page, .auth-card) .sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 481px) {
  .auth-page {
    padding: 40px 24px;
  }

  .auth-card,
  .auth-page .auth-card {
    padding: 32px 24px;
    box-shadow: var(--auth-card-shadow);
  }
}

@media (min-width: 769px) {
  .auth-page {
    padding-block: 56px;
  }

  .auth-card,
  .auth-page .auth-card {
    padding: 40px 32px;
  }
}