/* Dark theme (default) */
.dark-theme {
    --color-tone-1: #1a1a1b;
    --color-tone-2: #787c7e;
    --color-tone-3: #818384;
    --color-tone-4: #3a3a3c;
    --color-tone-5: #272729;
    --color-tone-6: #1a1a1b;
    --color-tone-7: #d7dadc;
    --color-nav-border: #3a3a3c;
    
    --color-correct: #2563eb;
    --color-present: #fb923c;
    --color-absent: #787c7e;
    --color-evaluated-background: #1a1a1b;
    
    --color-text-primary: #ffffff;
    --color-text-secondary: #818384;
    
    --color-background: #121213;
    --color-background-secondary: #1a1a1b;
    
    --color-border-primary: #3a3a3c;
    --color-border-secondary: #272729;
    
    --color-key-background: #818384;
    --color-key-background-active: #565758;
    --color-key-text: #ffffff;
    
    --color-modal-background: rgba(0, 0, 0, 0.5);
    --color-modal-content: #1a1a1b;
}

/* Light theme */
body:not(.dark-theme) {
    --color-tone-1: #000000;
    --color-tone-2: #787c7e;
    --color-tone-3: #878a8c;
    --color-tone-4: #d3d6da;
    --color-tone-5: #edeff1;
    --color-tone-6: #f6f7f8;
    --color-tone-7: #ffffff;
    --color-nav-border: #d3d6da;
    
    --color-correct: #2563eb;
    --color-present: #fb923c;
    --color-absent: #787c7e;
    --color-evaluated-background: #ffffff;
    
    --color-text-primary: #000000;
    --color-text-secondary: #787c7e;
    
    --color-background: #ffffff;
    --color-background-secondary: #f6f7f8;
    
    --color-border-primary: #d3d6da;
    --color-border-secondary: #edeff1;
    
    --color-key-background: #d3d6da;
    --color-key-background-active: #787c7e;
    --color-key-text: #000000;
    
    --color-modal-background: rgba(255, 255, 255, 0.5);
    --color-modal-content: #ffffff;
}

/* High contrast mode for accessibility */
.colorblind-theme {
    --color-correct: #10b981;
    --color-present: #a855f7;
    --color-absent: #787c7e;
}

/* Combine dark theme with colorblind mode */
.dark-theme.colorblind-theme {
    --color-correct: #10b981;
    --color-present: #a855f7;
    --color-absent: #787c7e;
}

/* High contrast patterns for colorblind users */
.colorblind-theme .tile-correct::after {
    content: '✓';
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.colorblind-theme .tile-present::after {
    content: '?';
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.colorblind-theme .tile-absent::after {
    content: '✗';
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.colorblind-theme .tile {
    position: relative;
}

/* Keyboard indicators for colorblind mode */
.colorblind-theme .key-correct::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    color: white;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.colorblind-theme .key-present::after {
    content: '?';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    color: white;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.colorblind-theme .key-absent::after {
    content: '✗';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    color: white;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.colorblind-theme .key {
    position: relative;
}

/* System preference detection */
@media (prefers-color-scheme: light) {
    :root {
        --color-tone-1: #000000;
        --color-tone-2: #787c7e;
        --color-tone-3: #878a8c;
        --color-tone-4: #d3d6da;
        --color-tone-5: #edeff1;
        --color-tone-6: #f6f7f8;
        --color-tone-7: #ffffff;
        --color-nav-border: #d3d6da;
        
        --color-text-primary: #000000;
        --color-text-secondary: #787c7e;
        
        --color-background: #ffffff;
        --color-background-secondary: #f6f7f8;
        
        --color-border-primary: #d3d6da;
        --color-border-secondary: #edeff1;
        
        --color-key-background: #d3d6da;
        --color-key-background-active: #787c7e;
        --color-key-text: #000000;
        
        --color-modal-content: #ffffff;
        --color-evaluated-background: #ffffff;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-tone-1: #1a1a1b;
        --color-tone-2: #787c7e;
        --color-tone-3: #818384;
        --color-tone-4: #3a3a3c;
        --color-tone-5: #272729;
        --color-tone-6: #1a1a1b;
        --color-tone-7: #d7dadc;
        --color-nav-border: #3a3a3c;
        
        --color-text-primary: #ffffff;
        --color-text-secondary: #818384;
        
        --color-background: #121213;
        --color-background-secondary: #1a1a1b;
        
        --color-border-primary: #3a3a3c;
        --color-border-secondary: #272729;
        
        --color-key-background: #818384;
        --color-key-background-active: #565758;
        --color-key-text: #ffffff;
        
        --color-modal-content: #1a1a1b;
        --color-evaluated-background: #1a1a1b;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-border-primary: #ffffff;
        --color-text-primary: #ffffff;
    }
    
    body:not(.dark-theme) {
        --color-border-primary: #000000;
        --color-text-primary: #000000;
    }
    
    .tile {
        border-width: 3px;
    }
    
    .key {
        border: 2px solid var(--color-text-primary);
    }
    
    .modal-content {
        border: 2px solid var(--color-text-primary);
    }
}

/* Theme transition animations */
.theme-transition {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* Apply transitions to all theme-dependent elements */
body,
.tile,
.key,
.modal-content,
.header,
.icon-btn {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* Print styles */
@media print {
    body {
        --color-background: white;
        --color-text-primary: black;
        --color-border-primary: black;
    }
    
    .header,
    .keyboard,
    .modal {
        display: none !important;
    }
    
    .game-board {
        page-break-inside: avoid;
    }
}

/* Custom theme for specific events (can be activated via JavaScript) */
.holiday-theme {
    --color-correct: #c41e3a;
    --color-present: #ffd700;
    --color-absent: #228b22;
}

.halloween-theme {
    --color-correct: #ff6600;
    --color-present: #9932cc;
    --color-absent: #000000;
    --color-background: #1a0d00;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .theme-transition,
    body,
    .tile,
    .key,
    .modal-content {
        transition: none !important;
    }
}

/* Force high contrast for users who need it */
.force-high-contrast {
    filter: contrast(150%) brightness(120%);
}

/* Sepia mode for eye strain reduction */
.sepia-mode {
    filter: sepia(0.3) brightness(1.1);
}

/* Blue light filter */
.blue-light-filter {
    filter: hue-rotate(180deg) invert(1) hue-rotate(180deg);
}

/* Large text mode */
.large-text {
    font-size: 120%;
}

.large-text .tile {
    font-size: 38px;
}

.large-text .key {
    font-size: 16px;
}

/* Screen reader friendly theme indicators */
.sr-theme-indicator {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Focus indicators for different themes */
.dark-theme *:focus {
    outline-color: #2563eb;
}

body:not(.dark-theme) *:focus {
    outline-color: #2563eb;
}

.colorblind-theme *:focus {
    outline: 3px solid #10b981;
    outline-offset: 2px;
}