/* Theme variables for light/dark mode */

/* Base config: Default is Dark Mode */
:root {
    --color-primary: #3b82f6; /* Blue for dark mode */
    --page-bg: #111111; /* Off-black */
    --text-main: #FFFFFF;
    --text-muted: #9CA3AF;
    --glass-bg: rgba(26, 26, 26, 0.6);
    --glass-stop-bg: rgba(26, 26, 26, 0.6);
    --glass-border: rgba(255, 255, 255, 0.15);
    --panel-bg: rgba(255, 255, 255, 0.08);
    --panel-bg-hover: rgba(255, 255, 255, 0.12);
    --input-bg: rgba(0, 0, 0, 0.7);
    --border-subtle: rgba(255, 255, 255, 0.2);
    --shadow-glass: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --color-surface-container-high: rgba(26, 26, 26, 0.95);
}

/* Light Mode Overrides */
html:not(.dark) {
    --color-primary: #137fec; /* Login Screen Blue */
    --page-bg: #F3F4F6;
    --text-main: #111827;
    --text-muted: #6B7280;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-stop-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.1);
    --panel-bg: rgba(0, 0, 0, 0.05);
    --panel-bg-hover: rgba(0, 0, 0, 0.1);
    --input-bg: rgba(255, 255, 255, 0.9);
    --border-subtle: rgba(0, 0, 0, 0.15);
    --shadow-glass: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    --color-surface-container-high: rgba(243, 244, 246, 0.95);
}

body {
    background-color: var(--page-bg) !important;
    color: var(--text-main) !important;
}

.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.fill-icon { fill: var(--color-primary) !important; }

/* Global Light Mode overrides */
html:not(.dark) .text-white { color: var(--text-main) !important; }
html:not(.dark) .text-white\/90 { color: rgba(17, 24, 39, 0.9) !important; }
html:not(.dark) .text-white\/80 { color: rgba(17, 24, 39, 0.8) !important; }
html:not(.dark) .text-white\/70 { color: rgba(17, 24, 39, 0.7) !important; }
html:not(.dark) .text-white\/60 { color: rgba(17, 24, 39, 0.6) !important; }
html:not(.dark) .text-white\/50 { color: rgba(17, 24, 39, 0.5) !important; }
html:not(.dark) .text-white\/40 { color: rgba(17, 24, 39, 0.4) !important; }
html:not(.dark) .text-white\/30 { color: rgba(17, 24, 39, 0.3) !important; }
html:not(.dark) .text-white\/20 { color: rgba(17, 24, 39, 0.2) !important; }
html:not(.dark) .text-white\/10 { color: rgba(17, 24, 39, 0.1) !important; }
html:not(.dark) .text-white\/5 { color: rgba(17, 24, 39, 0.05) !important; }

html:not(.dark) .text-on-surface-variant { color: var(--text-muted) !important; }

html:not(.dark) .bg-white\/5 { background-color: var(--panel-bg) !important; border-color: var(--border-subtle) !important; color: var(--text-main) !important; }
html:not(.dark) .hover\:bg-white\/10:hover { background-color: var(--panel-bg-hover) !important; }
html:not(.dark) .bg-white\/10 { background-color: var(--panel-bg-hover) !important; border-color: var(--border-subtle) !important; color: var(--text-main) !important; }
html:not(.dark) .hover\:bg-white\/20:hover { background-color: rgba(0,0,0,0.15) !important; }

html:not(.dark) .bg-black\/50, html:not(.dark) .bg-black\/40, html:not(.dark) .bg-black\/30, html:not(.dark) .bg-black\/60 {
    background-color: var(--input-bg) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-main) !important;
}

html:not(.dark) .border-white\/20, html:not(.dark) .border-white\/10, html:not(.dark) .border-white\/5 { border-color: var(--border-subtle) !important; }
html:not(.dark) .border-white\/30 { border-color: rgba(0,0,0,0.2) !important; }

html:not(.dark) .bg-surface-container-high\/95, html:not(.dark) .bg-surface-container-high\/80 { background-color: var(--color-surface-container-high) !important; }

/* Component overrides */
html:not(.dark) .liquid-glass-main {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-glass) !important;
    color: var(--text-main) !important;
}
html:not(.dark) .liquid-glass-main * { color: var(--text-main); }
html:not(.dark) .liquid-glass-main .text-primary { color: var(--color-primary); }

html:not(.dark) .liquid-glass-stop {
    background: var(--glass-stop-bg) !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-main) !important;
}
html:not(.dark) .liquid-glass-stop * { color: var(--text-main); }
html:not(.dark) .liquid-glass-stop .text-primary { color: var(--color-primary); }