/**
 * Global Theme Styles for InductOnline
 * Provides CSS custom properties and base styling for system-based theming
 */

/* Root theme variables - will be set by ThemeManager */
:root {
    /* Default to dark theme values - will be overridden by theme manager */
    --primary-bg: #141414;
    --secondary-bg: #1a1a1a;
    --tertiary-bg: #2a2a2a;
    --card-bg: #222222;
    --hover-bg: #333333;
    
    --primary-text: #ffffff;
    --secondary-text: #e5e5e5;
    --muted-text: #cccccc;
    --disabled-text: #999999;
    
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
    
    --accent-primary: #e50914;
    --accent-secondary: #10b981;
    --accent-tertiary: #3b82f6;
    
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.5);
    --shadow-heavy: rgba(0, 0, 0, 0.8);
    
    --overlay-bg: rgba(0, 0, 0, 0.8);
    --glass-bg: rgba(20, 20, 20, 0.8);
}

/* Base body styling */
body {
    margin: 0;
    padding: 0;
    background-color: var(--primary-bg);
    color: var(--primary-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure smooth theme transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme-specific body classes for additional styling */
.theme-dark {
    color-scheme: dark;
}

.theme-light {
    color-scheme: light;
}

/* Scrollbar theming */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--secondary-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--tertiary-bg);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--hover-bg);
}

/* Selection colors */
::selection {
    background: var(--accent-primary);
    color: white;
}

/* Focus styles that work with both themes */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    :root {
        --primary-bg: white;
        --secondary-bg: #f8f9fa;
        --tertiary-bg: #e9ecef;
        --card-bg: white;
        --hover-bg: #f8f9fa;
        
        --primary-text: #000000;
        --secondary-text: #333333;
        --muted-text: #666666;
        --disabled-text: #999999;
        
        --border-color: rgba(0, 0, 0, 0.1);
        --border-hover: rgba(0, 0, 0, 0.2);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-color: rgba(255, 255, 255, 0.3);
        --border-hover: rgba(255, 255, 255, 0.5);
    }
    
    .theme-light {
        --border-color: rgba(0, 0, 0, 0.3);
        --border-hover: rgba(0, 0, 0, 0.5);
    }
}

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

/* Shoelace icon styling */
sl-icon {
    color: inherit;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
}

.category-title sl-icon {
    margin-right: 8px;
    font-size: 1.2em;
}

.btn-hero-play sl-icon,
.btn-hero-info sl-icon,
.btn-hero-list sl-icon {
    margin-right: 6px;
    font-size: 16px;
}

.feature-tag sl-icon {
    font-size: 12px;
}

.activity-title sl-icon,
.leaderboard-title sl-icon {
    margin-right: 6px;
    font-size: 1.1em;
}

.btn-celebrate sl-icon {
    font-size: 18px;
}

/* Header control icons - need specific styling for visibility */
.search-btn sl-icon,
.profile-menu sl-icon {
    color: var(--primary-text);
    font-size: 18px;
}

/* Ensure icons work in both themes */
.theme-dark sl-icon {
    color: var(--primary-text, #ffffff);
}

.theme-light sl-icon {
    color: var(--primary-text, #1f2937);
}

/* Header controls need special treatment in light theme */
.theme-light .search-btn sl-icon,
.theme-light .profile-menu sl-icon {
    color: #1f2937;
}

.theme-light .search-btn:hover sl-icon,
.theme-light .profile-menu:hover sl-icon {
    color: #111827;
}

.theme-dark .search-btn sl-icon,
.theme-dark .profile-menu sl-icon {
    color: #ffffff;
}

.theme-dark .search-btn:hover sl-icon,
.theme-dark .profile-menu:hover sl-icon {
    color: #e5e5e5;
}

/* Theme preview classes for testing */
.theme-preview-dark {
    background: #141414;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-preview-light {
    background: #ffffff;
    color: #1f2937;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}