/* ==========================================
   CSS Variables for Dynamic Color Schemes
   ========================================== */

:root[data-theme="midnight"] {
    --bg-gradient: radial-gradient(circle at top right, #0f172a, #020617);
    --glass-bg: rgba(15, 23, 42, 0.6);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.08);
    --accent-grad-start: #3b82f6;
    --accent-grad-end: #10b981;
}

:root[data-theme="neon-cyber"] {
    --bg-gradient: radial-gradient(circle at top right, #120326, #050014);
    --glass-bg: rgba(20, 5, 35, 0.6);
    --text-main: #f5f3ff;
    --text-muted: #a78bfa;
    --border-color: rgba(236, 72, 153, 0.15);
    --accent-grad-start: #ec4899;
    --accent-grad-end: #8b5cf6;
}

:root[data-theme="ocean-breeze"] {
    --bg-gradient: radial-gradient(circle at top right, #042f2e, #022c22);
    --glass-bg: rgba(6, 78, 59, 0.4);
    --text-main: #f0fdfa;
    --text-muted: #2dd4bf;
    --border-color: rgba(45, 212, 191, 0.15);
    --accent-grad-start: #0d9488;
    --accent-grad-end: #06b6d4;
}

:root[data-theme="sunset-glow"] {
    --bg-gradient: radial-gradient(circle at top right, #2a0808, #110000);
    --glass-bg: rgba(67, 20, 20, 0.5);
    --text-main: #fff7ed;
    --text-muted: #fb923c;
    --border-color: rgba(249, 115, 22, 0.15);
    --accent-grad-start: #f97316;
    --accent-grad-end: #ef4444;
}

:root[data-theme="slate-luxury"] {
    --bg-gradient: radial-gradient(circle at top right, #1e293b, #0f172a);
    --glass-bg: rgba(30, 41, 59, 0.7);
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.1);
    --accent-grad-start: #64748b;
    --accent-grad-end: #cbd5e1;
}

/* New Light Themes */
:root[data-theme="daylight-bright"] {
    --bg-gradient: radial-gradient(circle at top right, #f8fafc, #e2e8f0);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --text-main: #0f172a;
    --text-muted: #475569;
    --border-color: rgba(15, 23, 42, 0.1);
    --accent-grad-start: #2563eb;
    --accent-grad-end: #059669;
}

:root[data-theme="soft-pastel"] {
    --bg-gradient: radial-gradient(circle at top right, #fdf4ff, #fae8ff);
    --glass-bg: rgba(255, 255, 255, 0.65);
    --text-main: #4a044e;
    --text-muted: #86198f;
    --border-color: rgba(192, 38, 211, 0.15);
    --accent-grad-start: #d946ef;
    --accent-grad-end: #8b5cf6;
}

/* ==========================================
   Global & Layout Styles
   ========================================== */

body { 
    background: var(--bg-gradient);
    min-height: 100vh;
    color: var(--text-main); 
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: background 0.5s ease, color 0.3s ease;
}

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    transition: background 0.3s ease, border 0.3s ease;
}

.active-tab {
    background: linear-gradient(135deg, var(--accent-grad-start), var(--accent-grad-end));
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.theme-text-muted {
    color: var(--text-muted);
}

/* ==========================================
   Light Theme Overrides
   ========================================== */

[data-theme="daylight-bright"] .text-white, 
[data-theme="soft-pastel"] .text-white,
[data-theme="daylight-bright"] .text-slate-300, 
[data-theme="soft-pastel"] .text-slate-300 {
    color: var(--text-main) !important;
}

[data-theme="daylight-bright"] .text-slate-400, 
[data-theme="soft-pastel"] .text-slate-400,
[data-theme="daylight-bright"] .text-slate-500, 
[data-theme="soft-pastel"] .text-slate-500 {
    color: var(--text-muted) !important;
}

[data-theme="daylight-bright"] .bg-slate-950\/80,
[data-theme="soft-pastel"] .bg-slate-950\/80,
[data-theme="daylight-bright"] .bg-slate-900\/90,
[data-theme="soft-pastel"] .bg-slate-900\/90,
[data-theme="daylight-bright"] .bg-slate-900\/40,
[data-theme="soft-pastel"] .bg-slate-900\/40,
[data-theme="daylight-bright"] .bg-slate-800\/80,
[data-theme="soft-pastel"] .bg-slate-800\/80,
[data-theme="daylight-bright"] .bg-slate-950,
[data-theme="soft-pastel"] .bg-slate-950,
[data-theme="daylight-bright"] .bg-slate-900,
[data-theme="soft-pastel"] .bg-slate-900 {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="daylight-bright"] .border-slate-800,
[data-theme="soft-pastel"] .border-slate-800,
[data-theme="daylight-bright"] .border-slate-800\/60,
[data-theme="soft-pastel"] .border-slate-800\/60,
[data-theme="daylight-bright"] .border-slate-700\/60,
[data-theme="soft-pastel"] .border-slate-700\/60 {
    border-color: var(--border-color) !important;
}

[data-theme="daylight-bright"] .from-white,
[data-theme="soft-pastel"] .from-white {
    --tw-gradient-from: var(--text-main) !important;
}

[data-theme="daylight-bright"] .to-slate-400,
[data-theme="soft-pastel"] .to-slate-400 {
    --tw-gradient-to: var(--text-muted) !important;
}

[data-theme="daylight-bright"] input::placeholder,
[data-theme="soft-pastel"] input::placeholder {
    color: var(--text-muted) !important;
}