/* Premium Interactive Theme Switcher Styles */

/* 1. Theme CSS Variable Declarations */
body.theme-luminous {
    --color-accent: #855300;
    --color-accent-rgb: 133, 83, 0;
    --color-accent-hover: #653e00;
    --color-accent-light: #ffddb8;
    --color-primary: #855300;
    --color-primary-dark: #653e00;
    --color-secondary: #625e51;
    --color-dark: #f8f9ff;
    --color-dark-2: #eff4ff;
    --color-dark-3: #e6eeff;
    --color-darker: #ffffff;
    --color-text: #121c2a;
    --color-text-secondary: #534434;
    --color-border: #d8c3ad;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(133, 83, 0, 0.15);
}

body.theme-matcha {
    --color-accent: #10b981;
    --color-accent-rgb: 16, 185, 129;
    --color-accent-hover: #059669;
    --color-accent-light: #34d399;
    --color-primary: #10b981;
    --color-primary-dark: #059669;
    --color-secondary: #059669;
    --color-dark: #000000;
    --color-dark-2: #0a0a0a;
    --color-dark-3: #121212;
    --color-darker: #050505;
    --color-text: #ffffff;
    --color-text-secondary: #a0a0a0;
    --color-border: #252525;
    --glass-bg: rgba(10, 10, 10, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
}

body.theme-sunset {
    --color-accent: #f97316;
    --color-accent-rgb: 249, 115, 22;
    --color-accent-hover: #ea580c;
    --color-accent-light: #fdba74;
    --color-primary: #f97316;
    --color-primary-dark: #ea580c;
    --color-secondary: #d97706;
    --color-dark: #0a0602;
    --color-dark-2: #160f0a;
    --color-dark-3: #221710;
    --color-darker: #0d0805;
    --color-text: #fefefe;
    --color-text-secondary: #d1c7bd;
    --color-border: #35261d;
    --glass-bg: rgba(22, 15, 10, 0.75);
    --glass-border: rgba(249, 115, 22, 0.12);
}

body.theme-amethyst {
    --color-accent: #c084fc;
    --color-accent-rgb: 192, 132, 252;
    --color-accent-hover: #a855f7;
    --color-accent-light: #e9d5ff;
    --color-primary: #c084fc;
    --color-primary-dark: #a855f7;
    --color-secondary: #9333ea;
    --color-dark: #080311;
    --color-dark-2: #130a24;
    --color-dark-3: #1f113a;
    --color-darker: #0a0416;
    --color-text: #fefefe;
    --color-text-secondary: #d2c8e3;
    --color-border: #311c57;
    --glass-bg: rgba(19, 10, 36, 0.75);
    --glass-border: rgba(192, 132, 252, 0.12);
}

body.theme-ocean {
    --color-accent: #06b6d4;
    --color-accent-rgb: 6, 182, 212;
    --color-accent-hover: #0891b2;
    --color-accent-light: #67e8f9;
    --color-primary: #06b6d4;
    --color-primary-dark: #0891b2;
    --color-secondary: #0284c7;
    --color-dark: #020914;
    --color-dark-2: #091729;
    --color-dark-3: #112543;
    --color-darker: #040e1d;
    --color-text: #fefefe;
    --color-text-secondary: #c2cbd6;
    --color-border: #1a355e;
    --glass-bg: rgba(9, 23, 41, 0.75);
    --glass-border: rgba(6, 182, 212, 0.12);
}

body.theme-light-matcha {
    --color-accent: #16a34a;
    --color-accent-rgb: 22, 163, 74;
    --color-accent-hover: #15803d;
    --color-accent-light: #86efac;
    --color-primary: #16a34a;
    --color-primary-dark: #15803d;
    --color-secondary: #166534;
    --color-dark: #fbfaf5;
    --color-dark-2: #f2f1e6;
    --color-dark-3: #e6e5d5;
    --color-darker: #f5f4ea;
    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-border: #d1d5db;
    --glass-bg: rgba(242, 241, 230, 0.8);
    --glass-border: rgba(22, 163, 74, 0.15);
}

/* 2. Global Class Overrides for Hardcoded Backgrounds & Texts */
body.theme-luminous, body.theme-sunset, body.theme-amethyst, body.theme-ocean, body.theme-light-matcha {
    background-color: var(--color-dark) !important;
    color: var(--color-text) !important;
}

/* Background overrides */
body.theme-luminous .bg-black, body.theme-sunset .bg-black, body.theme-amethyst .bg-black, body.theme-ocean .bg-black, body.theme-light-matcha .bg-black,
body.theme-luminous .bg-gray-950, body.theme-sunset .bg-gray-950, body.theme-amethyst .bg-gray-950, body.theme-ocean .bg-gray-950, body.theme-light-matcha .bg-gray-950,
body.theme-luminous .bg-darker, body.theme-sunset .bg-darker, body.theme-amethyst .bg-darker, body.theme-ocean .bg-darker, body.theme-light-matcha .bg-darker {
    background-color: var(--color-dark) !important;
}

body.theme-luminous .bg-gray-900, body.theme-sunset .bg-gray-900, body.theme-amethyst .bg-gray-900, body.theme-ocean .bg-gray-900, body.theme-light-matcha .bg-gray-900,
body.theme-luminous .bg-dark, body.theme-sunset .bg-dark, body.theme-amethyst .bg-dark, body.theme-ocean .bg-dark, body.theme-light-matcha .bg-dark,
body.theme-luminous .bg-gray-900\/40, body.theme-sunset .bg-gray-900\/40, body.theme-amethyst .bg-gray-900\/40, body.theme-ocean .bg-gray-900\/40, body.theme-light-matcha .bg-gray-900\/40 {
    background-color: var(--color-dark-2) !important;
}

body.theme-luminous .bg-gray-800, body.theme-sunset .bg-gray-800, body.theme-amethyst .bg-gray-800, body.theme-ocean .bg-gray-800, body.theme-light-matcha .bg-gray-800,
body.theme-luminous .bg-gray-800\/50, body.theme-sunset .bg-gray-800\/50, body.theme-amethyst .bg-gray-800\/50, body.theme-ocean .bg-gray-800\/50, body.theme-light-matcha .bg-gray-800\/50 {
    background-color: var(--color-dark-3) !important;
}

/* Glass card variable mapping */
body.theme-luminous .glass-card, body.theme-sunset .glass-card, body.theme-amethyst .glass-card, body.theme-ocean .glass-card, body.theme-light-matcha .glass-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}

/* Text color overrides */
body.theme-sunset .text-white, body.theme-amethyst .text-white, body.theme-ocean .text-white {
    color: var(--color-text) !important;
}

/* Light themes: only override text-white on headings and layout text, NOT on buttons, links, or badges */
body.theme-luminous .text-white:not(a):not(button):not(.btn):not(.badge):not(.button):not([class*="btn"]):not([class*="button"]),
body.theme-light-matcha .text-white:not(a):not(button):not(.btn):not(.badge):not(.button):not([class*="btn"]):not([class*="button"]) {
    color: var(--color-text) !important;
}

/* Header & navigation link text colors for light themes */
body.theme-luminous header a,
body.theme-luminous header button,
body.theme-luminous #mobile-menu a,
body.theme-light-matcha header a,
body.theme-light-matcha header button,
body.theme-light-matcha #mobile-menu a {
    color: var(--color-text) !important;
}

body.theme-luminous header a:hover,
body.theme-light-matcha header a:hover {
    color: var(--color-accent) !important;
}

/* Invert white logo to dark logo for light themes */
body.theme-luminous header img[src*="logo"],
body.theme-luminous #app-mobile-header img[src*="logo"],
body.theme-light-matcha header img[src*="logo"],
body.theme-light-matcha #app-mobile-header img[src*="logo"] {
    filter: invert(1) brightness(0.1) !important;
}

/* Make footer links and texts dark in light themes since footer background is white */
body.theme-luminous footer,
body.theme-luminous footer *,
body.theme-light-matcha footer,
body.theme-light-matcha footer * {
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

body.theme-luminous .text-gray-300, body.theme-sunset .text-gray-300, body.theme-amethyst .text-gray-300, body.theme-ocean .text-gray-300, body.theme-light-matcha .text-gray-300,
body.theme-luminous .text-gray-400, body.theme-sunset .text-gray-400, body.theme-amethyst .text-gray-400, body.theme-ocean .text-gray-400, body.theme-light-matcha .text-gray-400 {
    color: var(--color-text-secondary) !important;
}


/* Accent Colors */
body.theme-luminous .text-emerald-400, body.theme-sunset .text-emerald-400, body.theme-amethyst .text-emerald-400, body.theme-ocean .text-emerald-400, body.theme-light-matcha .text-emerald-400,
body.theme-luminous .text-emerald-300, body.theme-sunset .text-emerald-300, body.theme-amethyst .text-emerald-300, body.theme-ocean .text-emerald-300, body.theme-light-matcha .text-emerald-300,
body.theme-luminous .text-green-500, body.theme-sunset .text-green-500, body.theme-amethyst .text-green-500, body.theme-ocean .text-green-500, body.theme-light-matcha .text-green-500 {
    color: var(--color-accent) !important;
}

/* Active element glows and accent backgrounds */
body.theme-luminous .bg-emerald-600, body.theme-sunset .bg-emerald-600, body.theme-amethyst .bg-emerald-600, body.theme-ocean .bg-emerald-600, body.theme-light-matcha .bg-emerald-600,
body.theme-luminous .bg-emerald-500, body.theme-sunset .bg-emerald-500, body.theme-amethyst .bg-emerald-500, body.theme-ocean .bg-emerald-500, body.theme-light-matcha .bg-emerald-500 {
    background-color: var(--color-accent) !important;
}

body.theme-luminous .bg-emerald-600:hover, body.theme-sunset .bg-emerald-600:hover, body.theme-amethyst .bg-emerald-600:hover, body.theme-ocean .bg-emerald-600:hover, body.theme-light-matcha .bg-emerald-600:hover,
body.theme-luminous .bg-emerald-700, body.theme-sunset .bg-emerald-700, body.theme-amethyst .bg-emerald-700, body.theme-ocean .bg-emerald-700, body.theme-light-matcha .bg-emerald-700 {
    background-color: var(--color-accent-hover) !important;
}

body.theme-luminous .border-emerald-500, body.theme-sunset .border-emerald-500, body.theme-amethyst .border-emerald-500, body.theme-ocean .border-emerald-500, body.theme-light-matcha .border-emerald-500 {
    border-color: var(--color-accent) !important;
}

body.theme-luminous .bg-emerald-900, body.theme-sunset .bg-emerald-900, body.theme-amethyst .bg-emerald-900, body.theme-ocean .bg-emerald-900, body.theme-light-matcha .bg-emerald-900,
body.theme-luminous .bg-emerald-950, body.theme-sunset .bg-emerald-950, body.theme-amethyst .bg-emerald-950, body.theme-ocean .bg-emerald-950, body.theme-light-matcha .bg-emerald-950 {
    background-color: var(--color-dark-3) !important;
    border-color: var(--color-border) !important;
}

/* Gradient texts mapping */
body.theme-luminous .gradient-text-green, body.theme-luminous .gradient-text-emerald {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 50%, var(--color-accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.theme-sunset .gradient-text-green,
body.theme-sunset .gradient-text-emerald {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 50%, var(--color-accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.theme-amethyst .gradient-text-green,
body.theme-amethyst .gradient-text-emerald {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 50%, var(--color-accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.theme-ocean .gradient-text-green,
body.theme-ocean .gradient-text-emerald {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 50%, var(--color-accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.theme-light-matcha .gradient-text-green,
body.theme-light-matcha .gradient-text-emerald {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 50%, var(--color-accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Specific theme-luminous overrides to match Stitch colors exactly */
body.theme-luminous .bg-primary {
    background-color: #855300 !important;
}
body.theme-luminous .text-primary {
    color: #855300 !important;
}
body.theme-luminous .bg-primary-container {
    background-color: #f59e0b !important;
}
body.theme-luminous .text-on-primary-container {
    color: #2a1700 !important;
}
body.theme-luminous .text-on-surface-variant {
    color: #534434 !important;
}
body.theme-luminous .text-on-surface {
    color: #121c2a !important;
}
body.theme-luminous .bg-surface-glass {
    background-color: rgba(255, 255, 255, 0.7) !important;
}
body.theme-luminous .bg-surface-container-low {
    background-color: #eff4ff !important;
}
body.theme-luminous .bg-surface-container {
    background-color: #e6eeff !important;
}
body.theme-luminous .bg-white {
    background-color: #ffffff !important;
}
body.theme-luminous .text-white {
    color: #ffffff !important;
}
body.theme-luminous .bg-success-green\/10 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}
body.theme-luminous .text-success-green {
    color: #22C55E !important;
}
body.theme-luminous .border-outline-variant\/10 {
    border-color: rgba(216, 195, 173, 0.1) !important;
}
body.theme-luminous .border-outline-variant\/20 {
    border-color: rgba(216, 195, 173, 0.2) !important;
}

/* Light mode specifics to keep typography readable */
body.theme-light-matcha .text-gray-300,
body.theme-light-matcha .text-gray-400,
body.theme-light-matcha .text-gray-500,
body.theme-luminous .text-gray-300,
body.theme-luminous .text-gray-400,
body.theme-luminous .text-gray-500 {
    color: #334155 !important; /*slate-700*/
}

body.theme-light-matcha p:not(.text-white):not(.text-light),
body.theme-luminous p:not(.text-white):not(.text-light) {
    color: #334155 !important;
}

body.theme-light-matcha .border-gray-800,
body.theme-light-matcha .border-gray-700,
body.theme-light-matcha .border-gray-850,
body.theme-luminous .border-gray-800,
body.theme-luminous .border-gray-700,
body.theme-luminous .border-gray-850 {
    border-color: #e2e8f0 !important; /*slate-200*/
}

body.theme-light-matcha input,
body.theme-light-matcha select,
body.theme-light-matcha textarea,
body.theme-light-matcha option,
body.theme-luminous input,
body.theme-luminous select,
body.theme-luminous textarea,
body.theme-luminous option {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}


body.theme-light-matcha .hero-title,
body.theme-luminous .hero-title {
    color: #0f172a !important;
}

body.theme-light-matcha .hero-benefits-grid span,
body.theme-luminous .hero-benefits-grid span {
    color: #1e293b !important;
}

/* 3. Panel Widget Styling */
.theme-switch-btn {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.theme-switch-btn:hover {
    transform: scale(1.1) rotate(12deg);
}

.theme-panel {
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.theme-panel.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.theme-option {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.theme-option:hover {
    transform: translateX(5px);
}

/* 4. Glowing Premium Design Classes */
.glass-card-glow {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.glass-card-glow:hover {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 30px rgba(var(--color-accent-rgb), 0.15) !important;
    transform: translateY(-5px) !important;
}

.custom-progress-bar {
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light)) !important;
}

.switch input:checked + .slider {
    background-color: var(--color-accent) !important;
}

.slider:before {
    background-color: #ffffff !important;
}

.slider {
    background-color: var(--color-dark-3) !important;
}