/**
 * Industry Standard 2025 Theme Colors
 * 
 * This file provides ONLY structural styles and fallbacks.
 * Actual theme colors are injected by reader.php from database.
 * 
 * DO NOT add hardcoded color values here - they will override database colors!
 */

/* ============================================
   SMOOTH TRANSITIONS
   Disabled when user prefers reduced motion
   ============================================ */
:root {
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}

body:not(.no-transitions) * {
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                opacity var(--transition-base),
                transform var(--transition-base);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   LIGHT MODE - Structural Styles
   ============================================ */
:root,
[data-theme="light"],
body[data-theme="light"] {
    /* Interactive states */
    --hover-bg: #f3f4f6;
    --active-bg: #e5e7eb;
    --focus-ring: rgba(37, 99, 235, 0.2);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Status colors */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    
    /* Gold accent (for bookmarks, highlights) */
    --gold-color: #f59e0b;
}

/* ============================================
   DARK MODE - Structural Styles
   ============================================ */
[data-theme="dark"],
body[data-theme="dark"] {
    /* Interactive states */
    --hover-bg: #1e293b;
    --active-bg: #334155;
    --focus-ring: rgba(59, 130, 246, 0.3);
    
    /* Shadows - more prominent on dark */
    --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);
    
    /* Status colors - adjusted for dark bg */
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --error-color: #f87171;
    --info-color: #60a5fa;
    
    /* Gold accent */
    --gold-color: #fbbf24;
}

/* ============================================
   SEPIA/READING MODE - Structural Styles
   ============================================ */
[data-theme="sepia"],
body[data-theme="sepia"] {
    /* Interactive states */
    --hover-bg: #e8dcc0;
    --active-bg: #d4c8b4;
    --focus-ring: rgba(139, 69, 19, 0.2);
    
    /* Shadows - subtle on sepia */
    --shadow-sm: 0 1px 2px 0 rgba(62, 39, 35, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(62, 39, 35, 0.15);
    --shadow-lg: 0 10px 15px -3px rgba(62, 39, 35, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(62, 39, 35, 0.25);
    
    /* Status colors - muted for sepia */
    --success-color: #689f38;
    --warning-color: #f57c00;
    --error-color: #d32f2f;
    --info-color: #1976d2;
    
    /* Gold accent */
    --gold-color: #d2691e;
}

/* ============================================
   HIGH CONTRAST MODE - Structural Styles
   ============================================ */
[data-theme="high-contrast"],
body[data-theme="high-contrast"] {
    /* Interactive states */
    --hover-bg: #1a1a1a;
    --active-bg: #2a2a2a;
    --focus-ring: rgba(0, 212, 255, 0.8);
    
    /* Shadows - bright glow instead of shadow */
    --shadow-sm: 0 0 4px rgba(0, 212, 255, 0.5);
    --shadow-md: 0 0 8px rgba(0, 212, 255, 0.6);
    --shadow-lg: 0 0 12px rgba(0, 212, 255, 0.7);
    --shadow-xl: 0 0 16px rgba(0, 212, 255, 0.8);
    
    /* Status colors - bright and distinct */
    --success-color: #00ff88;
    --warning-color: #ffaa00;
    --error-color: #ff3366;
    --info-color: #00d4ff;
    
    /* Gold accent */
    --gold-color: #ffaa00;
}

/* ============================================
   THEME-SPECIFIC ADJUSTMENTS
   ============================================ */

/* Dark mode - reduce image brightness */
[data-theme="dark"] img:not([data-no-filter]) {
    filter: brightness(0.9);
}

/* Sepia mode - warm filter on images */
[data-theme="sepia"] img:not([data-no-filter]) {
    filter: sepia(0.1);
}

/* High contrast - no filters */
[data-theme="high-contrast"] img {
    filter: contrast(1.2);
}

/* ============================================
   PRINT STYLES
   Always use light mode for printing
   ============================================ */
@media print {
    :root {
        --text-primary: #000000;
        --bg-primary: #ffffff;
        --border-color: #000000;
    }
}