/**
 * Mijn Bijbel - Theme Styles
 * Light, Dark, and Warm (Paper) themes
 */

/* ==========================================================================
   Light Theme (Default - already in base.css :root)
   ========================================================================== */

.theme-light,
body:not(.theme-dark):not(.theme-warm) {
    --bg-primary: #E8E8E8;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F5F5F5;
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #888888;
    --border-color: #E0E0E0;
    --divider-color: #EEEEEE;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

.theme-dark {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --border-color: #30363d;
    --divider-color: #21262d;
    --shadow-color: rgba(0, 0, 0, 0.4);
    
    /* Adjusted brand colors for dark mode */
    --brand-light: rgba(56, 108, 158, 0.15);
    --highlight-green: rgba(56, 108, 158, 0.3);
    --highlight-gold: rgba(218, 165, 32, 0.3);
}

/* Dark theme specific overrides */
.theme-dark {
    color-scheme: dark;
}

.theme-dark ::selection {
    background-color: var(--brand-color);
    color: white;
}

/* Scrollbar in dark mode */
.theme-dark ::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==========================================================================
   Warm/Paper Theme
   ========================================================================== */

.theme-warm {
    --bg-primary: #f5f0e6;
    --bg-secondary: #fbf9f3;
    --bg-tertiary: #ffffff;
    --text-primary: #3d3630;
    --text-secondary: #5c534a;
    --text-muted: #8c8278;
    --border-color: #e6dfd3;
    --divider-color: #f0ebe3;
    --shadow-color: rgba(61, 54, 48, 0.1);
    
    /* Warmer brand accent */
    --brand-color: #a28263;
    --brand-hover: #8b6f55;
    --brand-light: rgba(162, 130, 99, 0.1);
    --highlight-green: rgba(162, 130, 99, 0.2);
    --highlight-gold: rgba(218, 165, 32, 0.25);
}

/* Warm theme specific overrides */
.theme-warm ::selection {
    background-color: rgba(162, 130, 99, 0.3);
}

/* ==========================================================================
   Theme Transition
   ========================================================================== */

body {
    transition: 
        background-color var(--transition-normal),
        color var(--transition-normal);
}

/* Elements that should transition smoothly during theme changes */
.sidebar,
.tabs-grid,
.bible-tab-wrapper,
.bottom-sheet,
.settings-popup,
.mobile-bottom-nav {
    transition: 
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

/* ==========================================================================
   Auto Theme (System Preference)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    body.theme-auto {
        --bg-primary: #0d1117;
        --bg-secondary: #161b22;
        --bg-tertiary: #21262d;
        --text-primary: #c9d1d9;
        --text-secondary: #8b949e;
        --text-muted: #6e7681;
        --border-color: #30363d;
        --divider-color: #21262d;
        --shadow-color: rgba(0, 0, 0, 0.4);
        --brand-light: rgba(56, 108, 158, 0.15);
    }
    
    body.theme-auto {
        color-scheme: dark;
    }
}

/* ==========================================================================
   Theme-Specific Component Adjustments
   ========================================================================== */

/* Sidebar in dark mode */
.theme-dark .sidebar {
    background-color: var(--bg-secondary);
    border-right-color: var(--border-color);
}

/* Tabs in dark mode */
.theme-dark .bible-tab-wrapper {
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-md);
}

/* Bottom nav in dark mode */
.theme-dark .mobile-bottom-nav {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
}

/* Bottom sheets in dark mode */
.theme-dark .bottom-sheet {
    background-color: var(--bg-secondary);
}

/* Dropdowns in dark mode */
.theme-dark .dropdown,
.theme-dark .nav-dropdown {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* Inputs in dark mode */
.theme-dark input,
.theme-dark textarea,
.theme-dark select {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
    color: var(--text-muted);
}

/* Buttons in warm theme */
.theme-warm .btn-primary {
    background-color: var(--brand-color);
}

.theme-warm .btn-primary:hover {
    background-color: var(--brand-hover);
}