/* DreamTech Shared Theme System
   Dark mode is default. Add .light class to body for light mode.
   Theme preference stored in localStorage key: 'theme'
   Values: 'light' or 'dark' (default if absent)
*/

/* Light mode base */
:root {
    --dot-color: rgba(0, 0, 0, 0.18);
}
body.light {
    background-color: #ffffff;
    color: #1e293b;
}

/* Dark mode base */
body:not(.light) {
    --dot-color: rgba(255, 255, 255, 0.15);
    background-color: #050810;
    color: #e2e8f0;
}

/* Backgrounds */
body:not(.light) .bg-white { background-color: #0f0f14; }
body:not(.light) .bg-slate-50 { background-color: #0a0a0f; }
body:not(.light) .bg-slate-100 { background-color: #0f0f14; }
body:not(.light) .bg-slate-200 { background-color: #16161d; }
body:not(.light) .bg-slate-900 { background-color: #050810; }
body:not(.light) .hover\:bg-slate-100:hover { background-color: #16161d; }
body:not(.light) .hover\:bg-slate-50:hover { background-color: #0a0a0f; }

/* Text */
body:not(.light) .text-slate-400 { color: #94a3b8; }
body:not(.light) .text-slate-500 { color: #94a3b8; }
body:not(.light) .text-slate-600 { color: #94a3b8; }
body:not(.light) .text-slate-700 { color: #cbd5e1; }
body:not(.light) .text-slate-800 { color: #e2e8f0; }
body:not(.light) .text-slate-900 { color: #f1f5f9; }

/* Borders */
body:not(.light) .border-slate-100 { border-color: rgba(255, 255, 255, 0.08); }
body:not(.light) .border-slate-200 { border-color: rgba(255, 255, 255, 0.08); }
body:not(.light) .border-slate-300 { border-color: rgba(255, 255, 255, 0.12); }
body:not(.light) .border-white { border-color: #16161d; }
body:not(.light) .border-slate-200\/80 { border-color: rgba(255, 255, 255, 0.08); }

/* Shadows */
body:not(.light) .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
body:not(.light) .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
body:not(.light) .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4); }

/* Brand colors */
body:not(.light) .bg-brand-50 { background-color: rgba(59, 130, 246, 0.1); }
body:not(.light) .bg-brand-100 { background-color: rgba(59, 130, 246, 0.15); }
body:not(.light) .border-brand-100 { border-color: rgba(59, 130, 246, 0.2); }
body:not(.light) .hover\:border-brand-200:hover { border-color: rgba(59, 130, 246, 0.3); }

/* Emerald */
body:not(.light) .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.1); }
body:not(.light) .border-emerald-200 { border-color: rgba(16, 185, 129, 0.2); }
body:not(.light) .from-brand-50 { --tw-gradient-from: rgba(59, 130, 246, 0.1); }
body:not(.light) .to-emerald-50 { --tw-gradient-to: rgba(16, 185, 129, 0.1); }
body:not(.light) .from-emerald-50 { --tw-gradient-from: rgba(16, 185, 129, 0.1); }
body:not(.light) .to-cyan-50 { --tw-gradient-to: rgba(6, 182, 212, 0.1); }

/* Violet / Purple */
body:not(.light) .from-violet-50 { --tw-gradient-from: rgba(139, 92, 246, 0.1); }
body:not(.light) .to-purple-50 { --tw-gradient-to: rgba(168, 85, 247, 0.1); }
body:not(.light) .border-violet-300 { border-color: rgba(139, 92, 246, 0.3); }
body:not(.light) .hover\:border-violet-300:hover { border-color: rgba(139, 92, 246, 0.4); }
body:not(.light) .hover\:bg-violet-50\/30:hover { background-color: rgba(139, 92, 246, 0.1); }

/* Indigo */
body:not(.light) .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1); }
body:not(.light) .border-indigo-200 { border-color: rgba(99, 102, 241, 0.2); }

/* FAQ / Details */
body:not(.light) details { border-color: rgba(255, 255, 255, 0.08); }
body:not(.light) summary { color: #f1f5f9; }

/* Gradient borders in dark */
body:not(.light) .gradient-border > div { background: #0f0f14; }

/* Theme toggle button */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    padding: 0.625rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: all 0.2s;
}
body:not(.light) .theme-toggle {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(15, 15, 20, 0.8);
    color: #e2e8f0;
}
.theme-toggle:hover { transform: scale(1.05); }
.theme-toggle .sun-icon { display: block; }
.theme-toggle .moon-icon { display: none; }
.light .theme-toggle .sun-icon { display: none; }
.light .theme-toggle .moon-icon { display: block; }