/* Accessibility Enhancements */
@layer utilities {
  /* Focus management */
  .focus-ring {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
  }

  :focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
  }

  /* Scroll margin for skip links and anchor navigation */
  :target,
  [id] {
    scroll-margin-top: var(--space-20);
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    :root {
      --color-background: #000;
      --color-text-primary: #fff;
      --color-text-secondary: #fff;
      --color-border: #fff;
      --color-primary: #0f0;
      --color-danger: #f00;
    }

    .glass,
    .glass-card {
      background: var(--color-background);
      border: 2px solid var(--color-border);
    }

    .btn {
      border: 2px solid currentcolor;
    }
  }

  /* Reduced transparency support */
  @media (prefers-reduced-transparency: reduce) {
    .glass,
    .glass-card,
    .glass-nav,
    .glass-modal {
      backdrop-filter: none;
      background: var(--color-surface-elevated);
      opacity: 1;
    }
  }

  /* Print styles */
  @media print {
    .btn,
    .upload-area,
    .glass {
      background: white !important;
      color: black !important;
      border: 1px solid black !important;
    }

    .main-content {
      display: block !important;
    }

    .preview-image {
      max-width: 100% !important;
      height: auto !important;
    }
  }

  /* Status indicators with ARIA support */
  .status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
  }

  .status-indicator[role="status"] {
    /* Screen readers will announce changes to content */
  }

  .status-success {
    background: rgb(34 197 94 / 0.1);
    color: var(--color-success);
    border: 1px solid rgb(34 197 94 / 0.3);
  }

  .status-error {
    background: rgb(239 68 68 / 0.1);
    color: var(--color-danger);
    border: 1px solid rgb(239 68 68 / 0.3);
  }

  .status-warning {
    background: rgb(251 146 60 / 0.1);
    color: var(--color-warning);
    border: 1px solid rgb(251 146 60 / 0.3);
  }

  /* Loading overlay with proper ARIA */
  .loading-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
  }

  .loading-overlay.show {
    display: flex;
  }

  .loading-overlay.show ~ * {
    /* Elements should be marked as inert via JavaScript */
  }

  /* Skip links for keyboard navigation */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--color-background);
    color: var(--color-text-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    z-index: 10000;
    transition: top 0.2s ease;
  }

  .skip-link:focus {
    top: 6px;
  }

  /* Better touch targets for mobile */
  @media (width <= 768px) {
    button,
    .btn,
    [role="button"] {
      min-height: 44px;
      min-width: 44px;
    }
  }

  /* Large text support */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  /* Ensure sufficient color contrast */
  .text-muted {
    color: var(--color-text-muted);
  }

  /* Only show muted text if contrast is sufficient */
  @supports (color-contrast(white vs var(--color-text-muted))) {
    .text-muted {
      color: color-contrast(var(--color-background) vs var(--color-text-muted), var(--color-text-secondary));
    }
  }
}