/* =================================================================
   ACCESSIBILITY ENHANCEMENTS - WCAG 2.1 AAA COMPLIANCE
   Comprehensive accessibility improvements for inclusive design
   Created: 2025-01-25
   ================================================================= */

/* =================================================================
   WCAG 2.1 AAA COLOR CONTRAST COMPLIANCE
   ================================================================= */

:root {
    /* High contrast color ratios (AAA compliant) */
    --contrast-ratio-aaa: 7:1;
    --contrast-ratio-aa: 4.5:1;
    
    /* Accessible color palette */
    --text-primary-accessible: #ffffff;
    --text-secondary-accessible: #f0f0f0;
    --text-muted-accessible: #cccccc;
    --bg-primary-accessible: #000000;
    --bg-secondary-accessible: #1a1a1a;
    --accent-accessible: #4dabf7;
    --success-accessible: #40c057;
    --warning-accessible: #fab005;
    --error-accessible: #fa5252;
    
    /* Focus indicators */
    --focus-ring-color: #4dabf7;
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --text-primary: var(--text-primary-accessible);
        --text-secondary: var(--text-secondary-accessible);
        --text-muted: var(--text-muted-accessible);
        --battle-bg-primary: var(--bg-primary-accessible);
        --battle-bg-secondary: var(--bg-secondary-accessible);
        --player-primary: var(--accent-accessible);
        --opponent-primary: var(--error-accessible);
    }
    
    /* Ensure all interactive elements have sufficient contrast */
    button, .btn, .card, [role="button"] {
        background-color: var(--bg-secondary-accessible) !important;
        color: var(--text-primary-accessible) !important;
        border: 2px solid var(--text-primary-accessible) !important;
    }
    
    /* Remove subtle backgrounds that reduce contrast */
    .glass-panel {
        background: var(--bg-secondary-accessible) !important;
        backdrop-filter: none !important;
    }
}

/* =================================================================
   KEYBOARD NAVIGATION AND FOCUS MANAGEMENT
   ================================================================= */

/* Enhanced focus indicators for all interactive elements */
*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
    outline-offset: var(--focus-ring-offset) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 0 0 1px var(--focus-ring-color) !important;
    transition: outline-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Remove default focus styles to prevent double outlines */
*:focus {
    outline: none;
}

/* Keyboard navigation support */
.keyboard-navigation *:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
    outline-offset: var(--focus-ring-offset) !important;
}

/* Skip links for efficient navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--bg-primary-accessible);
    color: var(--text-primary-accessible);
    padding: 8px 16px;
    text-decoration: none;
    border: 2px solid var(--focus-ring-color);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-bold);
    z-index: 10000;
    transition: top 0.2s ease;
}

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

/* Focus trap for modals */
.modal-container[aria-hidden="false"] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.modal-container .focus-trap-start,
.modal-container .focus-trap-end {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Tab navigation indicators */
.tab-navigation {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid var(--glass-border);
}

.tab-navigation li {
    margin: 0;
}

.tab-navigation button {
    background: none;
    border: none;
    padding: 12px 16px;
    cursor: pointer;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: var(--text-base);
}

.tab-navigation button:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.tab-navigation button[aria-selected="true"] {
    color: var(--player-primary);
    border-bottom-color: var(--player-primary);
    background: rgba(77, 171, 247, 0.1);
}

.tab-navigation button:focus-visible {
    background: rgba(77, 171, 247, 0.2);
}

/* =================================================================
   SCREEN READER OPTIMIZATIONS
   ================================================================= */

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

/* Live regions for dynamic content */
.live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Card accessibility enhancements */
.card[role="button"] {
    position: relative;
}

.card::before {
    content: attr(aria-label);
    position: absolute;
    top: -1px;
    left: -1px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
}

.card:focus::before {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    background: var(--bg-primary-accessible);
    color: var(--text-primary-accessible);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    z-index: 1000;
}

/* Enhanced button and form labels */
.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.form-label[aria-required="true"]::after {
    content: " *";
    color: var(--error-accessible);
    font-weight: var(--font-weight-bold);
}

/* Descriptive text for complex UI elements */
.complex-ui-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 4px 0 8px;
    line-height: 1.4;
}

/* =================================================================
   MOTOR ACCESSIBILITY FEATURES
   ================================================================= */

/* Larger touch targets for mobile devices */
@media (hover: none) and (pointer: coarse) {
    button, .btn, .card, [role="button"], input, select, textarea {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 16px;
    }
    
    /* Increased spacing between interactive elements */
    .interactive-group > * + * {
        margin-top: 12px;
    }
    
    .interactive-row > * + * {
        margin-left: 12px;
    }
}

/* Sticky hover states for touch devices */
@media (hover: none) {
    .card:active,
    button:active,
    .btn:active {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(0.98);
        transition: all 0.1s ease;
    }
}

/* Reduced motion support */
@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;
    }
    
    /* Disable particle effects and complex animations */
    .card-particles,
    .particle-system,
    [class*="animate"],
    [class*="shimmer"] {
        animation: none !important;
        transform: none !important;
    }
    
    /* Simple hover effects only */
    .card:hover {
        transform: none;
        box-shadow: var(--shadow-subtle);
        border-color: var(--player-primary);
    }
}

/* Voice control integration points */
.voice-command {
    position: relative;
}

.voice-command::after {
    content: attr(data-voice-command);
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-primary-accessible);
    color: var(--text-secondary);
    padding: 2px 6px;
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}

.voice-command:focus::after,
.voice-command:hover::after {
    opacity: 1;
}

/* =================================================================
   COGNITIVE ACCESSIBILITY SUPPORT
   ================================================================= */

/* Clear visual hierarchy */
h1, .h1 { 
    font-size: var(--text-3xl); 
    margin: 0 0 var(--spacing-fluid-lg);
    font-weight: var(--font-weight-bold);
}

h2, .h2 { 
    font-size: var(--text-2xl); 
    margin: var(--spacing-fluid-lg) 0 var(--spacing-fluid-md);
    font-weight: var(--font-weight-semibold);
}

h3, .h3 { 
    font-size: var(--text-xl); 
    margin: var(--spacing-fluid-md) 0 var(--spacing-fluid-sm);
    font-weight: var(--font-weight-semibold);
}

/* Consistent interaction patterns */
.clickable-pattern {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--radius-md);
    padding: 8px;
}

.clickable-pattern:hover {
    background: rgba(255, 255, 255, 0.05);
}

.clickable-pattern:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

/* Progress indicators for long operations */
.progress-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
}

.progress-indicator .progress-text {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.progress-indicator .progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-indicator .progress-fill {
    height: 100%;
    background: var(--player-primary);
    border-radius: inherit;
    transition: width 0.3s ease;
}

/* Error prevention and clear error messages */
.error-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(250, 82, 82, 0.1);
    border: 2px solid var(--error-accessible);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    margin: 8px 0;
}

.error-message::before {
    content: "⚠";
    font-size: var(--text-lg);
    color: var(--error-accessible);
}

.success-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(64, 192, 87, 0.1);
    border: 2px solid var(--success-accessible);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    margin: 8px 0;
}

.success-message::before {
    content: "✓";
    font-size: var(--text-lg);
    color: var(--success-accessible);
}

.warning-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(250, 176, 5, 0.1);
    border: 2px solid var(--warning-accessible);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    margin: 8px 0;
}

.warning-message::before {
    content: "⚡";
    font-size: var(--text-lg);
    color: var(--warning-accessible);
}

/* =================================================================
   VISUAL ACCESSIBILITY ENHANCEMENTS
   ================================================================= */

/* Support for custom font sizes */
.font-size-small { font-size: var(--text-sm); }
.font-size-normal { font-size: var(--text-base); }
.font-size-large { font-size: var(--text-lg); }
.font-size-extra-large { font-size: var(--text-xl); }

/* Proper text spacing and line height */
body, .readable-text {
    line-height: 1.6;
    word-spacing: 0.1em;
    letter-spacing: 0.02em;
}

.tight-text { line-height: 1.4; }
.loose-text { line-height: 1.8; }

/* Color-blind friendly alternatives */
.status-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-indicator::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.status-success::before { background: var(--success-accessible); }
.status-warning::before { background: var(--warning-accessible); }
.status-error::before { background: var(--error-accessible); }

/* Pattern alternatives for color coding */
.pattern-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.1) 2px,
        rgba(255, 255, 255, 0.1) 4px
    );
}

.pattern-dots {
    background-image: radial-gradient(
        circle at 25% 25%,
        rgba(255, 255, 255, 0.1) 2px,
        transparent 2px
    );
    background-size: 8px 8px;
}

/* Zoom support up to 200% */
@media (min-resolution: 192dpi) {
    body {
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }
    
    .card, .btn, .modal-content {
        min-height: 44px;
        font-size: calc(var(--font-size, 1rem) * 1.1);
    }
}

/* =================================================================
   ARIA LIVE REGIONS AND DYNAMIC CONTENT
   ================================================================= */

/* Status announcements */
#status-announcements {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Battle state announcements */
.battle-announcements {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Card interaction feedback */
.card-interaction-feedback {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =================================================================
   SEMANTIC HTML AND LANDMARK ROLES
   ================================================================= */

/* Ensure proper heading hierarchy */
main h1:not(:first-child) {
    margin-top: var(--spacing-fluid-xl);
}

/* Navigation landmarks */
nav[role="navigation"] {
    position: relative;
}

nav[role="navigation"]::before {
    content: "Navigation: " attr(aria-label);
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Content regions */
main[role="main"]::before {
    content: "Main content";
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Complementary content */
aside[role="complementary"]::before {
    content: "Additional information";
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =================================================================
   ACCESSIBILITY DEBUGGING TOOLS (DEVELOPMENT ONLY)
   ================================================================= */

/* Uncomment for accessibility testing */
/*
.a11y-debug * {
    outline: 1px solid red !important;
}

.a11y-debug [role] {
    outline: 2px solid blue !important;
}

.a11y-debug [aria-label] {
    outline: 2px solid green !important;
}

.a11y-debug [tabindex] {
    outline: 2px solid orange !important;
}
*/