/* Solo/Couple View Mode Themes */

/* Dark Mode - Solo View (Blue theme) */
.dark.view-mode-solo {
    --view-primary: #3b82f6;
    --view-primary-light: #60a5fa;
    --view-primary-dark: #2563eb;
    --view-bg-gradient-from: #1e3a8a;
    --view-bg-gradient-to: #1e40af;
    --view-accent: #3b82f6;
}

/* Dark Mode - Couple View (Coral/Orange theme - matches light mode) */
.dark.view-mode-couple {
    --view-primary: #f97316;
    /* Orange-500 */
    --view-primary-light: #fb923c;
    /* Orange-400 */
    --view-primary-dark: #ea580c;
    /* Orange-600 */
    --view-accent: #f97316;
}

/* Light Mode - Solo View (White/neutral) */
.view-mode-solo {
    --view-primary: #3b82f6;
    --view-primary-light: #60a5fa;
    --view-primary-dark: #2563eb;
    --view-bg-gradient-from: #ffffff;
    --view-bg-gradient-to: #f8fafc;
    --view-accent: #3b82f6;
}

/* Light Mode - Couple View (Soft Coral gradient) */
.view-mode-couple {
    --view-primary: #f97316;
    --view-primary-light: #fb923c;
    --view-primary-dark: #ea580c;
    --view-accent: #f97316;
}

/* Apply gradient background to main content section */
.view-mode-solo #content-resumen {
    background: linear-gradient(to bottom, var(--view-bg-gradient-from), var(--view-bg-gradient-to));
    transition: background 0.5s ease;
}

.view-mode-couple #content-resumen {
    background: linear-gradient(to bottom, rgba(255, 247, 237, 0.4), rgba(255, 237, 213, 0.5));
    transition: background 0.5s ease;
}

.dark.view-mode-couple #content-resumen {
    background: linear-gradient(to bottom, rgba(6, 78, 59, 0.2), rgba(6, 95, 70, 0.3));
    transition: background 0.5s ease;
}

/* Update glass panels to use view theme */
.view-mode-couple .glass-panel {
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.6), rgba(255, 237, 213, 0.6));
    backdrop-filter: blur(20px);
    border-color: var(--view-accent);
    border-width: 1px;
}

.dark.view-mode-couple .glass-panel {
    background: linear-gradient(135deg, rgba(124, 45, 18, 0.4), rgba(154, 52, 18, 0.4));
    /* Dark orange gradient */
    backdrop-filter: blur(20px);
    border-color: var(--view-accent);
}

.dark.view-mode-solo .glass-panel {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3));
    backdrop-filter: blur(20px);
    border-color: var(--view-accent);
}

/* Update primary colored elements */
.view-mode-solo .text-primary,
.view-mode-couple .text-primary {
    color: var(--view-primary) !important;
}

.view-mode-solo .bg-primary,
.view-mode-couple .bg-primary {
    background-color: var(--view-primary) !important;
}

/* Ambient Light Blobs - Change colors based on view mode */

/* Couple View - Coral/Orange tones */
.view-mode-couple .blob-1 {
    background: #fdba74 !important;
    /* Orange-300 */
}

.dark.view-mode-couple .blob-1 {
    background: #f97316 !important;
    /* Orange-500 */
}

.view-mode-couple .blob-2 {
    background: #fda4af !important;
    /* Rose-300 */
}

.dark.view-mode-couple .blob-2 {
    background: #fb7185 !important;
    /* Rose-400 */
}

.view-mode-couple .blob-3 {
    background: #fbbf24 !important;
    /* Amber-400 */
    opacity: 0.4;
}

.dark.view-mode-couple .blob-3 {
    background: #f59e0b !important;
    /* Amber-500 */
    opacity: 0.2;
}

/* Solo View - Keep original teal/blue/violet (default styles in index.html) */
/* No overrides needed for solo view as it uses the default colors */