/**
 * Parcelamento Fácil - Temas (Light & Dark) - Obsidian Fintech Premium
 * Desenvolvido por B20 Conteúdo Digital
 * https://www.b20.com.br
 */

/* === THEME VARIABLES === */
:root {
    /* Fonts */
    --font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Palette - Light Theme */
    --primary-color: #10B981;        /* Mint Finance / Neon Emerald */
    --primary-hover: #059669;
    --primary-light: rgba(16, 185, 129, 0.08);
    --secondary-color: #3B82F6;      /* Cobalt Blue / Economy Indigo */
    --secondary-hover: #2563EB;
    --secondary-light: rgba(59, 130, 246, 0.08);
    --accent-color: #6366F1;         /* Indigo accent */
    
    /* Backgrounds & Surfaces */
    --bg-color: #F8FAFC;             /* Slate ultra light */
    --surface-color: #FFFFFF;        /* Pure white */
    --surface-glass: rgba(255, 255, 255, 0.85);
    
    /* Borders & Text */
    --border-color: #E2E8F0;         /* Slate border light */
    --border-glass: rgba(226, 232, 240, 0.8);
    --text-color: #0F172A;           /* Slate dark */
    --text-muted: #64748B;           /* Slate medium */
    
    /* Toast colors */
    --toast-success: #10B981;
    --toast-error: #EF4444;
    --toast-info: #3B82F6;
    
    /* Layout */
    --border-radius: 16px;
    --border-radius-sm: 10px;
    --border-radius-lg: 24px;
    --spacing-unit: 8px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Premium Shadows in Layered Style */
    --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, 0.08), 0 10px 16px -8px rgba(15, 23, 42, 0.06);
}

/* === DARK THEME === */
[data-theme="dark"] {
    /* Palette - Dark Theme (Obsidian Fintech) */
    --primary-color: #00DD80;        /* Vivid Neon Mint */
    --primary-hover: #00BE6C;
    --primary-light: rgba(0, 221, 128, 0.12);
    --secondary-color: #6366F1;      /* Vivid Electric Indigo */
    --secondary-hover: #4F46E5;
    --secondary-light: rgba(99, 102, 241, 0.15);
    --accent-color: #8B5CF6;         /* Purple accent */
    
    /* Backgrounds & Surfaces */
    --bg-color: #090E1A;             /* Deep Obsidian Black */
    --surface-color: #111827;        /* Deep Slate Blue */
    --surface-glass: rgba(17, 24, 39, 0.75);
    
    /* Borders & Text */
    --border-color: #1F2937;         /* Charcoal/Dark gray border */
    --border-glass: rgba(255, 255, 255, 0.08);
    --text-color: #F9FAFB;           /* Warm white */
    --text-muted: #9CA3AF;           /* Silver gray */
    
    /* Toast colors */
    --toast-success: #00DD80;
    --toast-error: #EF4444;
    --toast-info: #6366F1;
    
    /* Shadows - Realistic Ambient Shadows for Dark Mode */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.6), 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* Auto Dark Mode (System Preference) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Palette - Dark Theme (Obsidian Fintech) */
        --primary-color: #00DD80;
        --primary-hover: #00BE6C;
        --primary-light: rgba(0, 221, 128, 0.12);
        --secondary-color: #6366F1;
        --secondary-hover: #4F46E5;
        --secondary-light: rgba(99, 102, 241, 0.15);
        --accent-color: #8B5CF6;
        
        /* Backgrounds & Surfaces */
        --bg-color: #090E1A;
        --surface-color: #111827;
        --surface-glass: rgba(17, 24, 39, 0.75);
        
        /* Borders & Text */
        --border-color: #1F2937;
        --border-glass: rgba(255, 255, 255, 0.08);
        --text-color: #F9FAFB;
        --text-muted: #9CA3AF;
        
        /* Toast colors */
        --toast-success: #00DD80;
        --toast-error: #EF4444;
        --toast-info: #6366F1;
        
        /* Shadows */
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.6), 0 10px 25px rgba(0, 0, 0, 0.4);
    }
}

/* === THEME TRANSITION === */
body,
.card,
.form-control,
.btn,
.app-header,
.bottom-nav,
.app-footer,
.result-item,
.history-item,
.faq-item {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === THEME TOGGLE BUTTON ANIMATION === */
#theme-toggle i {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] #theme-toggle i::before {
    content: "\f185"; /* fa-sun */
}

[data-theme="dark"] #theme-toggle i {
    transform: rotate(180deg);
}

/* === ACCESSIBILITY - HIGH CONTRAST === */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #047857;
        --border-color: #000000;
        --text-color: #000000;
        --text-muted: #1E293B;
    }
    
    [data-theme="dark"] {
        --primary-color: #10B981;
        --bg-color: #000000;
        --surface-color: #0A0A0A;
        --border-color: #FFFFFF;
        --text-color: #FFFFFF;
        --text-muted: #E5E7EB;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}