/**
 * NonVisionGames - Theme Stylesheet
 * 
 * Dark mode, high contrast, and theme variations
 * Respects user preferences via prefers-color-scheme
 */

/* ============================================================================
   DARK MODE (prefers-color-scheme: dark)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Mode Color Palette - WCAG AAA Compliant */
        --color-primary: #4D9FFF;
        --color-primary-dark: #3385D6;
        --color-primary-light: #66B3FF;

        --color-secondary: #33CC66;
        --color-secondary-dark: #00AA44;
        --color-secondary-light: #66DD88;

        --color-accent: #FF8533;
        --color-accent-dark: #FF6B00;
        --color-accent-light: #FFA366;

        --color-dark: #FFFFFF;
        --color-light: #1A1A1A;
        --color-gray-100: #2A2A2A;
        --color-gray-200: #3A3A3A;
        --color-gray-300: #4A4A4A;
        --color-gray-700: #CCCCCC;
        --color-gray-800: #E0E0E0;

        /* Semantic Colors for Dark Mode */
        --color-text: #FFFFFF;
        --color-text-muted: #CCCCCC;
        --color-background: #1A1A1A;
        --color-surface: #2A2A2A;
        --color-border: #4A4A4A;

        --color-success: #33CC66;
        --color-warning: #FFAA33;
        --color-error: #FF4444;
        --color-info: #4D9FFF;

        /* Adjusted shadows for dark mode */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    }

    /* Dark mode specific adjustments */
    body {
        background-color: var(--color-background);
        color: var(--color-text);
    }

    /* Adjust hero gradient for dark mode */
    .hero {
        background: linear-gradient(135deg, #1A3A5A 0%, #0D1F33 100%);
    }

    /* Card adjustments */
    .card {
        background-color: var(--color-surface);
        border-color: var(--color-border);
    }

    /* Input adjustments */
    input,
    textarea,
    select {
        background-color: var(--color-surface);
        border-color: var(--color-border);
        color: var(--color-text);
    }

    /* Code blocks */
    code,
    pre {
        background-color: var(--color-gray-100);
        color: var(--color-text);
    }

    /* Table adjustments */
    th {
        background-color: var(--color-surface);
    }

    tbody tr:nth-child(even) {
        background-color: var(--color-gray-100);
    }

    /* Footer already dark, adjust for dark mode */
    .site-footer {
        background-color: #0D0D0D;
        border-top: 1px solid var(--color-border);
    }
}

/* ============================================================================
   MANUAL THEME SWITCHING (via data attribute)
   ============================================================================ */

/* Light theme (default) - explicit declaration */
[data-theme="light"] {
    /* Uses default :root values */
}

/* Dark theme - manual override */
[data-theme="dark"] {
    --color-primary: #4D9FFF;
    --color-primary-dark: #3385D6;
    --color-primary-light: #66B3FF;

    --color-secondary: #33CC66;
    --color-secondary-dark: #00AA44;
    --color-secondary-light: #66DD88;

    --color-accent: #FF8533;
    --color-accent-dark: #FF6B00;
    --color-accent-light: #FFA366;

    --color-text: #FFFFFF;
    --color-text-muted: #CCCCCC;
    --color-background: #1A1A1A;
    --color-surface: #2A2A2A;
    --color-border: #4A4A4A;

    --color-success: #33CC66;
    --color-warning: #FFAA33;
    --color-error: #FF4444;
    --color-info: #4D9FFF;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] body {
    background-color: var(--color-background);
    color: var(--color-text);
}

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #1A3A5A 0%, #0D1F33 100%);
}

[data-theme="dark"] .card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--color-gray-100);
    color: var(--color-text);
}

[data-theme="dark"] th {
    background-color: var(--color-surface);
}

[data-theme="dark"] tbody tr:nth-child(even) {
    background-color: var(--color-gray-100);
}

[data-theme="dark"] .site-footer {
    background-color: #0D0D0D;
    border-top: 1px solid var(--color-border);
}

/* ============================================================================
   HIGH CONTRAST THEME
   ============================================================================ */

[data-theme="high-contrast"] {
    --color-primary: #0000FF;
    --color-primary-dark: #0000CC;
    --color-primary-light: #3333FF;

    --color-secondary: #00AA00;
    --color-secondary-dark: #008800;
    --color-secondary-light: #00CC00;

    --color-accent: #FF0000;
    --color-accent-dark: #CC0000;
    --color-accent-light: #FF3333;

    --color-text: #000000;
    --color-text-muted: #000000;
    --color-background: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-border: #000000;

    --color-success: #00AA00;
    --color-warning: #FF8800;
    --color-error: #FF0000;
    --color-info: #0000FF;

    /* Remove all shadows */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
}

[data-theme="high-contrast"] body {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Stronger borders in high contrast */
[data-theme="high-contrast"] .card,
[data-theme="high-contrast"] .btn,
[data-theme="high-contrast"] input,
[data-theme="high-contrast"] textarea,
[data-theme="high-contrast"] select {
    border: 3px solid var(--color-border);
    box-shadow: none;
}

/* Remove gradients */
[data-theme="high-contrast"] .hero {
    background: var(--color-primary);
    color: var(--color-background);
}

/* Stronger focus indicators */
[data-theme="high-contrast"] *:focus {
    outline: 4px solid #000000;
    outline-offset: 2px;
}

/* Remove hover effects that rely on subtle changes */
[data-theme="high-contrast"] .card:hover {
    transform: none;
    border-color: var(--color-primary);
    border-width: 4px;
}

[data-theme="high-contrast"] .btn:hover {
    transform: none;
    border-width: 4px;
}

/* Ensure text is always black on white or white on black */
[data-theme="high-contrast"] .btn-primary {
    background-color: var(--color-primary);
    color: #FFFFFF;
    border: 3px solid #000000;
}

[data-theme="high-contrast"] .btn-secondary {
    background-color: var(--color-secondary);
    color: #FFFFFF;
    border: 3px solid #000000;
}

[data-theme="high-contrast"] .site-footer {
    background-color: #000000;
    color: #FFFFFF;
    border-top: 3px solid #FFFFFF;
}

/* ============================================================================
   DARK HIGH CONTRAST THEME
   ============================================================================ */

[data-theme="dark-high-contrast"] {
    --color-primary: #66B3FF;
    --color-primary-dark: #4D9FFF;
    --color-primary-light: #80C2FF;

    --color-secondary: #66FF66;
    --color-secondary-dark: #33FF33;
    --color-secondary-light: #99FF99;

    --color-accent: #FF6666;
    --color-accent-dark: #FF3333;
    --color-accent-light: #FF9999;

    --color-text: #FFFFFF;
    --color-text-muted: #FFFFFF;
    --color-background: #000000;
    --color-surface: #000000;
    --color-border: #FFFFFF;

    --color-success: #66FF66;
    --color-warning: #FFAA33;
    --color-error: #FF6666;
    --color-info: #66B3FF;

    /* Remove all shadows */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
}

[data-theme="dark-high-contrast"] body {
    background-color: var(--color-background);
    color: var(--color-text);
}

[data-theme="dark-high-contrast"] .card,
[data-theme="dark-high-contrast"] .btn,
[data-theme="dark-high-contrast"] input,
[data-theme="dark-high-contrast"] textarea,
[data-theme="dark-high-contrast"] select {
    border: 3px solid var(--color-border);
    box-shadow: none;
    background-color: var(--color-background);
    color: var(--color-text);
}

[data-theme="dark-high-contrast"] .hero {
    background: #000066;
    color: #FFFFFF;
}

[data-theme="dark-high-contrast"] *:focus {
    outline: 4px solid #FFFFFF;
    outline-offset: 2px;
}

[data-theme="dark-high-contrast"] .btn-primary {
    background-color: var(--color-primary);
    color: #000000;
    border: 3px solid #FFFFFF;
}

[data-theme="dark-high-contrast"] .btn-secondary {
    background-color: var(--color-secondary);
    color: #000000;
    border: 3px solid #FFFFFF;
}

/* ============================================================================
   THEME SWITCHER COMPONENT
   ============================================================================ */

.theme-switcher {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: 999;
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
}

.theme-switcher-label {
    display: block;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

.theme-switcher-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.theme-button {
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--color-border);
    background-color: var(--color-background);
    color: var(--color-text);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background-color var(--transition-fast),
        border-color var(--transition-fast);
    min-height: 44px;
    text-align: left;
}

.theme-button:hover {
    background-color: var(--color-primary);
    color: var(--color-light);
    border-color: var(--color-primary);
}

.theme-button:focus {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.theme-button[aria-pressed="true"] {
    background-color: var(--color-primary);
    color: var(--color-light);
    border-color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* Hide theme switcher in print */
@media print {
    .theme-switcher {
        display: none;
    }
}

/* ============================================================================
   FONT SIZE CONTROLS
   ============================================================================ */

.font-size-controls {
    position: fixed;
    bottom: var(--space-4);
    left: var(--space-4);
    z-index: 999;
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
}

.font-size-label {
    display: block;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

.font-size-buttons {
    display: flex;
    gap: var(--space-2);
}

.font-size-button {
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-border);
    background-color: var(--color-background);
    color: var(--color-text);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    transition: background-color var(--transition-fast);
    min-height: 44px;
    min-width: 44px;
}

.font-size-button:hover {
    background-color: var(--color-primary);
    color: var(--color-light);
    border-color: var(--color-primary);
}

.font-size-button:focus {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Font size variations */
[data-font-size="small"] {
    font-size: 87.5%;
    /* 14px */
}

[data-font-size="medium"] {
    font-size: 100%;
    /* 16px - default */
}

[data-font-size="large"] {
    font-size: 112.5%;
    /* 18px */
}

[data-font-size="x-large"] {
    font-size: 125%;
    /* 20px */
}

[data-font-size="xx-large"] {
    font-size: 150%;
    /* 24px */
}

/* Hide font size controls in print */
@media print {
    .font-size-controls {
        display: none;
    }
}

/* ============================================================================
   COLORBLIND FRIENDLY VARIATIONS
   ============================================================================ */

/* Deuteranopia (red-green colorblind) friendly */
[data-theme="colorblind-friendly"] {
    --color-primary: #0077BB;
    /* Blue */
    --color-secondary: #EE7733;
    /* Orange */
    --color-accent: #CC3311;
    /* Red */
    --color-success: #009988;
    /* Teal */
    --color-warning: #EE7733;
    /* Orange */
    --color-error: #CC3311;
    /* Red */
    --color-info: #0077BB;
    /* Blue */
}

/* Use patterns in addition to colors for critical information */
[data-theme="colorblind-friendly"] .success::before {
    content: "✓ ";
}

[data-theme="colorblind-friendly"] .error::before {
    content: "✗ ";
}

[data-theme="colorblind-friendly"] .warning::before {
    content: "⚠ ";
}

/* ============================================================================
   RESPONSIVE THEME ADJUSTMENTS
   ============================================================================ */

/* Mobile: Move theme controls to top for easier access */
@media (max-width: 767px) {

    .theme-switcher,
    .font-size-controls {
        position: static;
        margin-bottom: var(--space-4);
    }

    .theme-switcher-buttons,
    .font-size-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
}