/* =============================================================================
 * AurienConnect Accessibility Styles
 * WCAG 2.1 AA compliance
 * ============================================================================= */

/* ---------------------------------------------------------------------------
 * Screen Reader Only
 * Visually hidden but accessible to screen readers.
 * Focus-visible variant allows skip links to appear when focused.
 * --------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus,
.sr-only:focus-within,
.sr-only.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-4, 1rem);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: var(--color-primary-600, #2563eb);
  color: #ffffff;
  font-weight: var(--font-weight-semibold, 600);
  z-index: var(--z-max, 9999);
  text-decoration: none;
  border-radius: var(--radius-md, 0.375rem);
}

/* ---------------------------------------------------------------------------
 * Focus Visible
 * Consistent, high-contrast focus indicator for keyboard navigation.
 * Only shows when using keyboard (not mouse) via :focus-visible.
 * --------------------------------------------------------------------------- */
*:focus-visible {
  outline: 2px solid var(--color-primary-500, #3b82f6);
  outline-offset: 2px;
}

/* Remove default outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for interactive elements in dark context */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary-400, #60a5fa);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* ---------------------------------------------------------------------------
 * Reduced Motion
 * Respects user preference for reduced motion.
 * Disables all animations and transitions for users who request it.
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * High Contrast Mode
 * Enhanced contrast for users who need it.
 * --------------------------------------------------------------------------- */
@media (prefers-contrast: high) {
  :root {
    --color-surface-700: #000000;
    --color-surface-600: #1a1a1a;
    --color-surface-100: #ffffff;
    --color-surface-200: #e5e5e5;
    --glass-border: rgba(255, 255, 255, 0.3);
  }

  [data-theme="light"] {
    --color-surface-700: #ffffff;
    --color-surface-600: #f0f0f0;
    --color-surface-100: #000000;
    --color-surface-200: #1a1a1a;
    --glass-border: rgba(0, 0, 0, 0.3);
  }

  /* Ensure borders are visible */
  .border,
  [class*="border-"] {
    border-width: 2px !important;
  }

  /* Ensure minimum contrast on text */
  .text-gray-400,
  .text-gray-500 {
    color: var(--color-surface-300, #9ca3af) !important;
  }
}

/* ---------------------------------------------------------------------------
 * Dark Mode Contrast Enhancement
 * Ensures text-gray-500 meets WCAG AA 4.5:1 on dark backgrounds.
 * Default text-gray-500 (#6b7280) on bg-gray-900 (#111827) = ~3.9:1.
 * Bumped to #9ca3af (~5.3:1) in dark context.
 * --------------------------------------------------------------------------- */
.dark .text-gray-500,
[data-theme="dark"] .text-gray-500,
html:not([data-theme="light"]) .text-gray-500 {
  color: #9ca3af; /* gray-400 equivalent — 5.3:1 contrast on gray-900 */
}

/* ---------------------------------------------------------------------------
 * Forced Colors (Windows High Contrast)
 * Ensures proper rendering in Windows High Contrast mode.
 * --------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .glass-card,
  .bg-gray-800\/50,
  [class*="bg-gray-"] {
    border: 1px solid ButtonText;
  }

  a {
    color: LinkText;
  }

  button,
  [role="button"] {
    border: 1px solid ButtonText;
  }
}

/* ---------------------------------------------------------------------------
 * ARIA Live Region Styling
 * Visual indicators for dynamic content areas.
 * --------------------------------------------------------------------------- */
[role="alert"] {
  /* Ensure alerts are not hidden */
  display: block !important;
}

[aria-live="polite"],
[aria-live="assertive"] {
  /* Prevent layout shift from live regions */
  min-height: 0;
}

/* ---------------------------------------------------------------------------
 * Touch Targets
 * Minimum 44x44px touch targets per WCAG 2.5.5.
 * --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  button,
  a,
  input[type="checkbox"],
  input[type="radio"],
  select,
  [role="button"],
  [role="tab"],
  [role="menuitem"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---------------------------------------------------------------------------
 * Selection
 * Consistent text selection colors across themes.
 * --------------------------------------------------------------------------- */
::selection {
  background-color: var(--color-primary-600, #2563eb);
  color: #ffffff;
}