/* themes.css */

/* Theme System - Enhanced with better visual distinction */

/* Default Dark Theme */
:root, body[data-theme="dark"] {
    --primary: #6366f1;
    --secondary: #8b5cf6;
    --accent: #06d6a0;
    --bg-dark: #0a0a0f;
    --bg-glass: rgba(255, 255, 255, 0.1);
    --bg-glass-dark: rgba(0, 0, 0, 0.3);
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --border-glass: rgba(255, 255, 255, 0.2);
    --shadow: rgba(0, 0, 0, 0.3);
    
    /* Theme-specific additions */
    --glow-color: rgba(99, 102, 241, 0.3);
    --particle-color: #8b5cf6;
}

/* Cosmos Theme */
body[data-theme="cosmos"] {
    --primary: #8B5CF6;
    --secondary: #A855F7;
    --accent: #06D6A0;
    --bg-dark: #0B1426;
    --bg-glass: rgba(139, 92, 246, 0.15);
    --bg-glass-dark: rgba(11, 20, 38, 0.8);
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --border-glass: rgba(139, 92, 246, 0.3);
    --shadow: rgba(139, 92, 246, 0.2);
    
    /* Theme-specific additions */
    --glow-color: rgba(168, 85, 247, 0.4);
    --particle-color: #A855F7;
}

/* Cosmos theme specific adjustments */
body[data-theme="cosmos"] #scene-container {
    filter: hue-rotate(30deg) saturate(1.2);
}

/* Navigation buttons styling removed - handled in responsive.css */

body[data-theme="cosmos"] .focus-content,
body[data-theme="cosmos"] .task-section {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.1) 0%, 
        rgba(11, 20, 38, 0.9) 100%);
    border-color: rgba(168, 85, 247, 0.3);
}

body[data-theme="cosmos"] .timer-display {
    text-shadow: 0 0 40px var(--glow-color);
}

/* Auto Theme - follows system preference */
@media (prefers-color-scheme: light) {
    body[data-theme="auto"] {
        --primary: #4f46e5;
        --secondary: #7c3aed;
        --accent: #059669;
        --bg-dark: #f3f4f6;
        --bg-glass: rgba(255, 255, 255, 0.8);
        --bg-glass-dark: rgba(255, 255, 255, 0.95);
        --text-primary: #1f2937;
        --text-secondary: rgba(31, 41, 55, 0.7);
        --border-glass: rgba(0, 0, 0, 0.1);
        --shadow: rgba(0, 0, 0, 0.05);
        --glow-color: rgba(79, 70, 229, 0.2);
        --particle-color: #7c3aed;
    }
    
    body[data-theme="auto"] #scene-container {
        opacity: 0.7;
        filter: brightness(1.2) contrast(0.9);
    }
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] {
        --primary: #6366f1;
        --secondary: #8b5cf6;
        --accent: #06d6a0;
        --bg-dark: #0a0a0f;
        --bg-glass: rgba(255, 255, 255, 0.1);
        --bg-glass-dark: rgba(0, 0, 0, 0.3);
        --text-primary: #fff;
        --text-secondary: rgba(255, 255, 255, 0.7);
        --border-glass: rgba(255, 255, 255, 0.2);
        --shadow: rgba(0, 0, 0, 0.3);
        --glow-color: rgba(99, 102, 241, 0.3);
        --particle-color: #8b5cf6;
    }
}

/* Smooth theme transitions */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navigation buttons excluded - plain text only (responsive.css) */
.focus-content,
.task-section,
.liquid-glass-btn,
.task-input {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease,
                color 0.3s ease,
                backdrop-filter 0.3s ease;
}

/* Theme-specific button states */
body[data-theme="light"] .liquid-glass-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .btn-primary {
    background: var(--primary);
    color: white;
}

body[data-theme="light"] .btn-primary:hover {
    background: #4338ca;
}

body[data-theme="cosmos"] .btn:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.4);
}

/* Theme-specific text adjustments */
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3 {
    color: var(--text-primary);
}

body[data-theme="cosmos"] h1 {
    background: none;
    -webkit-text-fill-color: #C8922A;
    animation: none;
    text-shadow: 0 0 25px rgba(200, 146, 42, 0.2), 0 0 50px rgba(122, 92, 30, 0.08);
    filter: none;
}

/* Dark theme — gold hierarchy */
body[data-theme="dark"] h1 {
    background: none;
    -webkit-text-fill-color: #C8922A;
    animation: none;
    text-shadow: 0 0 25px rgba(200, 146, 42, 0.2), 0 0 50px rgba(122, 92, 30, 0.08);
    filter: none;
}

body[data-theme="dark"] .greeting {
    background: none;
    -webkit-text-fill-color: #9B7320;
    text-shadow: none;
    filter: none;
}

body[data-theme="dark"] .date-time {
    background: none;
    -webkit-text-fill-color: #7A5C1E;
    text-shadow: none;
}

/* Theme-specific input styles - moved to liquid-glass-buttons.css for consistency */
/* Keeping only theme-specific overrides */
body[data-theme="light"] .liquid-glass-btn .task-input,
body[data-theme="light"] .text-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

body[data-theme="light"] .liquid-glass-btn .task-input::placeholder,
body[data-theme="light"] .text-input::placeholder {
    color: rgba(31, 41, 55, 0.5);
}

body[data-theme="cosmos"] .liquid-glass-btn .task-input,
body[data-theme="cosmos"] .text-input {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
}

/* Add missing theme-specific rules from other files */

/* From liquid-glass-buttons.css */
[data-theme="light"] .meditation-orb-container {
    filter: brightness(1.2) contrast(0.9);
}

[data-theme="light"] .breathing-phase {
    color: var(--text-primary);
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

[data-theme="cosmos"] #meditationOrb {
    background: rgba(20, 10, 40, 0.8);
}

/* Water container theme adjustments removed - ultra-transparent settings in style.css take precedence */

/* Theme indicator for active theme button */
#themeDarkBtn[data-theme="dark"].active::after,
#themeCosmosBtn[data-theme="cosmos"].active::after,
#themeAutoBtn[data-theme="auto"].active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: var(--accent);
}

/* ===== NAVIGATION OVERRIDES REMOVED ===== */
/* All navigation button styling now exclusively handled in responsive.css */
/* This prevents theme-specific conflicts and ensures plain text appearance */