/**
 * Color Contrast Fixes for WCAG AA Compliance
 * Ensures all text meets 4.5:1 contrast ratio for normal text
 * and 3:1 for large text (18pt+ or 14pt+ bold)
 *
 * @version 1.0.0
 * @date 2025-10-20
 */

/* ==========================================================================
   HIGH CONTRAST MODE SUPPORT
   ========================================================================== */

/* Enable high contrast mode via CSS custom property or system preference */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #ffffff;
        --text-secondary: #e0e0e0;
        --text-muted: #b0b0b0;
        --bg-primary: #000000;
        --bg-secondary: #1a1a1a;
        --border-color: #ffffff;
        --accent-color: #ffff00;
        --link-color: #00ffff;
        --focus-outline: #ffffff;
    }
}

/* ==========================================================================
   IMPROVED COLOR PALETTE WITH BETTER CONTRAST
   ========================================================================== */

:root {
    /* Primary text colors - WCAG AA compliant */
    --text-primary: #ffffff;        /* White text on dark backgrounds */
    --text-secondary: #e2e8f0;     /* Slightly softer white */
    --text-muted: #cbd5f5;          /* Muted text, still meets contrast */
    --text-inverse: #000000;        /* Black text on light backgrounds */

    /* Background colors */
    --bg-primary: #0f0f23;          /* Dark blue-black */
    --bg-secondary: #1a1a2e;         /* Slightly lighter dark */
    --bg-tertiary: #252542;          /* Medium dark */
    --bg-card: rgba(13, 19, 48, 0.88); /* Card background */

    /* Border and separator colors */
    --border-light: rgba(99, 102, 241, 0.45);
    --border-medium: rgba(99, 102, 241, 0.55);
    --border-strong: rgba(165, 180, 252, 0.6);

    /* Accent colors with improved contrast */
    --accent-blue: #4dabf7;           /* Bright blue for highlights */
    --accent-green: #4ade80;          /* Bright green for success */
    --accent-yellow: #ffd93d;         /* Bright yellow for warnings */
    --accent-red: #ff6b6b;            /* Bright red for errors */
    --accent-purple: #a78bfa;          /* Bright purple for special states */

    /* Interactive element colors */
    --interactive-bg: rgba(30, 41, 99, 0.90);
    --interactive-hover: rgba(79, 70, 229, 0.88);
    --interactive-active: rgba(99, 102, 241, 0.78);

    /* Focus indicators */
    --focus-ring: rgba(102, 126, 234, 0.5);
    --focus-outline: #667eea;
}

/* ==========================================================================
   GLOBAL TEXT CONTRAST IMPROVEMENTS
   ========================================================================== */

body {
    color: var(--text-primary);
    /* Ensure text has proper contrast against background */
}

/* Improve contrast for header elements */
.header__title {
    color: var(--text-primary);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.header__tagline {
    color: var(--text-secondary);
    /* Increased from 0.72 to 0.9 opacity for better contrast */
    opacity: 0.9;
}

/* Category cards with improved contrast */
.category-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
}

.category-card:hover {
    background: var(--interactive-hover);
    border-color: var(--border-medium);
}

.category-name {
    color: var(--text-primary);
}

.category-desc {
    color: var(--text-secondary);
    /* Increased opacity for better readability */
    opacity: 0.85;
}

/* ==========================================================================
   AUDIO PLAYER CONTRAST IMPROVEMENTS
   ========================================================================== */

.audio-player {
    background: rgba(15, 15, 25, 0.98);
    border-top: 1px solid var(--border-light);
}

.track-title {
    color: var(--text-primary);
}

.track-category {
    color: var(--text-secondary);
    opacity: 0.85;
}

.control-btn {
    color: var(--text-primary);
    background: var(--interactive-bg);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.45);
}

.control-btn:hover,
.control-btn:focus {
    background: var(--interactive-hover);
    border-color: var(--border-medium);
    border-radius: 50%;
}

/* Progress bar with better contrast */
.progress-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-medium);
}

.progress-fill {
    background: var(--accent-blue);
}

/* Volume slider improvements */
.volume-slider {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

.volume-slider::-webkit-slider-thumb {
    background: var(--accent-blue);
    border: 2px solid var(--text-primary);
}

/* Playback rate select */
.playback-rate {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

/* ==========================================================================
   MODAL AND DIALOG CONTRAST FIXES
   ========================================================================== */

.modal-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-medium);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.close {
    color: var(--text-secondary);
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 50%;
}

.close:hover,
.close:focus {
    background: var(--interactive-bg);
    color: var(--text-primary);
}

/* Track list improvements */
.track-item {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.track-item:hover,
.track-item:focus {
    background: var(--interactive-hover);
    border-color: var(--border-medium);
}

/* ==========================================================================
   TIMER MODAL CONTRAST
   ========================================================================== */

.timer-modal {
    background: var(--bg-primary);
    border: 2px solid var(--border-medium);
}

.timer-content h3 {
    color: var(--text-primary);
}

.timer-options button {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-light);
}

.timer-options button:hover,
.timer-options button:focus {
    background: var(--interactive-hover);
    border-color: var(--accent-blue);
}

/* ==========================================================================
   LANGUAGE SELECTOR CONTRAST
   ========================================================================== */

.language-selector select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-light);
}

.language-selector select:hover,
.language-selector select:focus {
    background: var(--interactive-hover);
    border-color: var(--accent-blue);
}

.language-selector option {
    background: var(--bg-primary);
    color: var(--text-primary);
    /* Ensure options have proper contrast */
}

/* ==========================================================================
   NOTIFICATION CONTRAST IMPROVEMENTS
   ========================================================================== */

.notification {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-medium);
}

.notification.success {
    background: var(--bg-primary);
    border-color: var(--accent-green);
}

.notification.error {
    background: var(--bg-primary);
    border-color: var(--accent-red);
}

/* ==========================================================================
   HERO SECTION CONTRAST
   ========================================================================== */

.hero-intro__headline {
    color: var(--text-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.hero-intro__description {
    color: var(--text-secondary);
    /* Improved from 0.82 to 0.9 opacity */
    opacity: 0.9;
}

.hero-intro__cta-primary {
    background: linear-gradient(135deg, var(--accent-blue), #66e0ff);
    color: var(--text-inverse);
    /* Improved contrast with stronger text */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-intro__cta-secondary {
    color: var(--accent-blue);
    /* Stronger border for better visibility */
    border-bottom: 2px solid var(--accent-blue);
}

/* Hero stats with improved contrast */
.hero-intro__stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

.hero-intro__stat-number {
    color: var(--accent-yellow);
    /* More vivid yellow for better contrast */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-intro__stat-label {
    color: var(--text-secondary);
    opacity: 0.9;
}

/* ==========================================================================
   FEATURE CARDS CONTRAST
   ========================================================================== */

.feature-card h4 {
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
    opacity: 0.9;
}

.feature-summary__cta {
    background: transparent;
    color: var(--accent-blue);
    border: 2px solid var(--accent-blue);
}

.feature-summary__cta:hover,
.feature-summary__cta:focus {
    background: var(--accent-blue);
    color: var(--text-inverse);
}

/* ==========================================================================
   CONVERSION FORM CONTRAST
   ========================================================================== */

.conversion-offer__field label {
    color: var(--text-secondary);
    font-weight: 600;
}

.conversion-offer__field input,
.conversion-offer__field select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-light);
}

.conversion-offer__field input:focus,
.conversion-offer__field select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.conversion-offer__submit {
    background: linear-gradient(135deg, var(--accent-blue), #66e0ff);
    color: var(--text-inverse);
    border: none;
}

/* ==========================================================================
   AUTH DIALOG CONTRAST
   ========================================================================== */

.auth-dialog {
    background: rgba(0, 0, 0, 0.85);
}

.auth-modal-content {
    background: var(--bg-primary);
    border: 2px solid var(--border-medium);
}

.auth-header h2 {
    color: var(--text-primary);
}

.auth-tab {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid transparent;
}

.auth-tab.active {
    background: var(--accent-blue);
    color: var(--text-inverse);
}

.auth-tab:hover:not(.active) {
    background: var(--interactive-hover);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.form-group label {
    color: var(--text-secondary);
    font-weight: 600;
}

.form-group input {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-light);
}

.form-group input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.auth-btn.primary {
    background: linear-gradient(135deg, var(--accent-blue), #7777ff);
    color: var(--text-inverse);
}

.auth-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-light);
}

/* ==========================================================================
   FOCUS INDICATORS
   WCAG 2.1.1 requires visible focus indicators
   ========================================================================== */

/* Strong focus indicators for all interactive elements */
*:focus {
    outline: 3px solid var(--focus-outline);
    outline-offset: 2px;
}

/* Better focus for buttons */
button:focus,
.control-btn:focus,
.header-icon-btn:focus {
    outline: 3px solid var(--accent-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Focus for links */
a:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Focus for inputs and selects */
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--accent-blue);
    outline-offset: 2px;
    box-shadow: 0 0 5px var(--focus-ring);
}

/* ==========================================================================
   IMPROVED LINK CONTRAST
   ========================================================================== */

a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
}

a:hover {
    color: var(--accent-yellow);
    text-decoration: underline;
}

/* ==========================================================================
   ERROR AND SUCCESS STATES
   ========================================================================== */

.error {
    color: var(--accent-red);
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid var(--accent-red);
    padding: 4px 8px;
    border-radius: 4px;
}

.success {
    color: var(--accent-green);
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid var(--accent-green);
    padding: 4px 8px;
    border-radius: 4px;
}

.warning {
    color: var(--accent-yellow);
    background: rgba(255, 217, 61, 0.1);
    border: 1px solid var(--accent-yellow);
    padding: 4px 8px;
    border-radius: 4px;
}

/* ==========================================================================
   LOADING STATES
   ========================================================================== */

.loading-text {
    color: var(--text-primary);
    background: var(--bg-primary);
    padding: 20px;
    border-radius: 8px;
}

.loading-spinner {
    border: 4px solid var(--border-light);
    border-top-color: var(--accent-blue);
}

/* ==========================================================================
   SCREEN READER ONLY STYLES
   Ensures information is available to screen readers
   ========================================================================== */

.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;
}

/* But ensure it's available to screen readers */
.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 4px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ==========================================================================
   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;
    }
}

/* ==========================================================================
   DARK MODE SPECIFIC FIXES
   Already handled by the root variables above
   ========================================================================== */

/* ==========================================================================
   PRINT STYLES
   Ensure proper contrast when printing
   ========================================================================== */

.category-card {
    background: rgba(13, 19, 48, 0.92) !important;
    border: 1px solid rgba(99, 102, 241, 0.5) !important;
    color: #f8fafc !important;
}

.category-card:hover {
    background: rgba(30, 41, 99, 0.95) !important;
}

.header-icon-btn {
    background: rgba(20, 31, 68, 0.88) !important;
    border: 1px solid rgba(99, 102, 241, 0.45) !important;
    color: #f8fafc !important;
}

.header-icon-btn:hover {
    background: rgba(79, 70, 229, 0.85) !important;
}

.control-btn {
    background: rgba(20, 31, 68, 0.88) !important;
    border: 1px solid rgba(99, 102, 241, 0.45) !important;
    color: #f8fafc !important;
}

.control-btn:hover,
.control-btn:focus {
    background: rgba(79, 70, 229, 0.85) !important;
}

.language-selector select {
    background: rgba(20, 31, 68, 0.88) !important;
    border: 1px solid rgba(99, 102, 241, 0.45) !important;
    color: #f8fafc !important;
}
/* ==========================================================================
   SOCIAL SHARE BUTTONS CONTRAST FIXES
   ========================================================================== */

.social-share-toggle,
.social-share-btn {
    background: var(--interactive-bg) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-medium) !important;
}

.social-share-btn:hover,
.social-share-btn:focus {
    background: var(--interactive-hover) !important;
    border-color: var(--accent-blue) !important;
}

/* Fix for white text on white background */
.social-share-btn.facebook,
.social-share-btn.twitter,
.social-share-btn.linkedin,
.social-share-btn.whatsapp,
.social-share-btn.email,
.social-share-btn.copylink {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-light) !important;
}

/* ==========================================================================
   BUTTON CONTRAST FIXES
   ========================================================================== */

.hero-intro__cta-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border: none !important;
}

.conversion-offer__submit {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.content-card__link {
    background: var(--interactive-bg) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-medium) !important;
}

.impact-card__cta {
    background: var(--interactive-bg) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-medium) !important;
}

.focus-center-play-btn,
.focus-btn {
    background: var(--interactive-bg) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-medium) !important;
}

/* ==========================================================================
   CURRENT CATEGORY BADGE CONTRAST
   ========================================================================== */

.track-category {
    background: var(--bg-secondary) !important;
    color: var(--accent-blue) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-light) !important;
}

/* ==========================================================================
   COMPACT LOGIN BUTTONS
   ========================================================================== */

.compact-option-btn.google,
.compact-option-btn.anonymous {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-medium) !important;
}

.send-code-btn {
    background: var(--accent-blue) !important;
    color: #ffffff !important;
    border: none !important;
}

/* ==========================================================================
   DROPDOWN MENU ITEMS
   ========================================================================== */

.dropdown-item {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: none !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--interactive-hover) !important;
    color: var(--text-primary) !important;
}

@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }

    .audio-player,
    .header,
    .notification {
        display: none !important;
    }

    .category-card {
        border: 1px solid black !important;
        margin-bottom: 10px;
        page-break-inside: avoid;
    }
}