:root {
    --color-bg: #0b1120;
    --color-text-main: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-card-bg: rgba(28, 37, 65, 0.4);
    --color-border: rgba(51, 65, 85, 0.5);
}

body {
    background-color: var(--color-bg);
    font-family: 'Inter', sans-serif;
    color: var(--color-text-main);
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glow background decorations */
.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.glow-1 { top: -100px; left: -100px; width: 400px; height: 400px; background: #3b82f6; }
.glow-2 { bottom: 10%; right: -50px; width: 500px; height: 500px; background: #8b5cf6; }
.glow-3 { top: 40%; left: 30%; width: 450px; height: 450px; background: #e91e63; }

.content-wrapper {
    position: relative;
    z-index: 10;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Tab Transition Effects */
.tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.tab-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Highlight ring animation for Movistar Plus+ */
.partner-glow {
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.15);
    background: linear-gradient(90deg, rgba(233, 30, 99, 0.08) 0%, rgba(15, 23, 42, 0) 100%) !important;
    transition: background 0.4s ease;
}

/* Light Theme Style Enhancements */
.theme-light {
    --color-bg: #f8fafc;
    --color-text-main: #0f172a;
    --color-text-muted: #475569;
}

.theme-light .bg-glow {
    opacity: 0.04;
}

/* Overrides for text nodes with utility classes in Light Mode */
.theme-light .text-white { color: #0f172a !important; }
.theme-light .text-slate-100 { color: #1e293b !important; }
.theme-light .text-slate-200 { color: #334155 !important; }
.theme-light .text-slate-300 { color: #475569 !important; }
.theme-light .text-slate-400 { color: #57606a !important; }

/* Card background overrides in Light Mode */
.theme-light .bg-slate-800\/40,
.theme-light .bg-slate-800\/30,
.theme-light .bg-slate-800\/20,
.theme-light .bg-slate-900\/40,
.theme-light .bg-slate-900\/50,
.theme-light .bg-slate-900\/60 {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    border-color: #e2e8f0 !important;
}

/* Insight Card Light Mode Specific Style overrides */
.theme-light .insight-card {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, #ffffff 100%) !important;
    border-color: #e2e8f0 !important;
    border-left-color: #10b981 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Gradient card override */
.theme-light .bg-gradient-to-br.from-slate-900.to-slate-800 {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-color: #cbd5e1 !important;
}

.theme-light .bg-gradient-to-br.from-slate-900.to-slate-800 h4 {
    color: #0f172a !important;
}

/* Border overrides */
.theme-light .border-slate-700\/50,
.theme-light .border-slate-700\/30,
.theme-light .border-slate-800\/80,
.theme-light .border-slate-800 {
    border-color: #e2e8f0 !important;
}

/* Dynamic Table structure styling overrides */
.theme-light .bg-slate-900\/80 {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}

.theme-light .divide-slate-800\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: #f1f5f9 !important;
}

.theme-light tr.hover\:bg-slate-800\/20:hover {
    background-color: #f1f5f9 !important;
}

.theme-light .partner-glow {
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.08);
    background: linear-gradient(90deg, rgba(233, 30, 99, 0.05) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-left-color: #e91e63 !important;
}

.theme-light #appSearchInput {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Tab Navigation style overrides in Light Mode */
.theme-light nav {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.theme-light .tab-btn:not(.active) {
    color: #475569 !important;
}

.theme-light .tab-btn:not(.active):hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

.theme-light .tab-btn.active {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Invitation Banner Light Override */
.theme-light .bg-gradient-to-br.from-brand-accent\/30.via-slate-900.to-slate-900 {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.08) 0%, #ffffff 50%, #f1f5f9 100%) !important;
    border-color: rgba(233, 30, 99, 0.25) !important;
}

/* TV Mockup Outer Card Override (Inner TV screen remains dark) */
.theme-light .mockup-card {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Custom UI Transition variables */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Light mode specific growth badge contrast improvements */
.theme-light .growth-badge {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important; /* Rich green for accessibility in light theme */
    border-color: rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.05) !important;
}