/* ============================================
   ChatGenzAI - Themes (Dark/Light)
   File: css/themes.css
   ============================================ */

:root {
    /* Light Theme (default fallback) */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --bg-tertiary: #F3F4F6;
    --bg-elevated: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-hover: #F3F4F6;
    --bg-active: #E5E7EB;
    
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-tertiary: #6B7280;
    --text-muted: #9CA3AF;
    --text-inverse: #FFFFFF;
    
    --border-color: #E5E7EB;
    --border-light: #F3F4F6;
    --border-strong: #D1D5DB;
    
    --accent-primary: #7C3AED;
    --accent-secondary: #EC4899;
    --accent-gradient: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    --accent-hover: #6D28D9;
    --accent-light: rgba(124, 58, 237, 0.1);
    
    --success: #10B981;
    --success-light: #D1FAE5;
    --error: #EF4444;
    --error-light: #FEE2E2;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --info: #3B82F6;
    --info-light: #DBEAFE;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    --code-bg: #1E1E1E;
    --code-text: #D4D4D4;
    
    --message-user-bg: #F3F4F6;
    --message-ai-bg: transparent;
}

[data-theme="dark"] {
    /* Dark Theme */
    --bg-primary: #0F0F14;
    --bg-secondary: #18181B;
    --bg-tertiary: #1F1F25;
    --bg-elevated: #1A1A20;
    --bg-input: #1F1F25;
    --bg-hover: #27272E;
    --bg-active: #2D2D35;
    
    --text-primary: #FAFAFA;
    --text-secondary: #D4D4D8;
    --text-tertiary: #A1A1AA;
    --text-muted: #71717A;
    --text-inverse: #0F0F14;
    
    --border-color: #27272E;
    --border-light: #1F1F25;
    --border-strong: #3F3F46;
    
    --accent-primary: #A78BFA;
    --accent-secondary: #F472B6;
    --accent-gradient: linear-gradient(135deg, #A78BFA 0%, #F472B6 100%);
    --accent-hover: #C4B5FD;
    --accent-light: rgba(167, 139, 250, 0.15);
    
    --success: #34D399;
    --success-light: rgba(52, 211, 153, 0.15);
    --error: #F87171;
    --error-light: rgba(248, 113, 113, 0.15);
    --warning: #FBBF24;
    --warning-light: rgba(251, 191, 36, 0.15);
    --info: #60A5FA;
    --info-light: rgba(96, 165, 250, 0.15);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    
    --code-bg: #0D0D12;
    --code-text: #E5E5E5;
    
    --message-user-bg: #27272E;
    --message-ai-bg: transparent;
}

/* Auto theme - mengikuti sistem */
@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        --bg-primary: #FFFFFF;
        --bg-secondary: #F9FAFB;
        --bg-tertiary: #F3F4F6;
        --bg-elevated: #FFFFFF;
        --bg-input: #FFFFFF;
        --bg-hover: #F3F4F6;
        --bg-active: #E5E7EB;
        
        --text-primary: #111827;
        --text-secondary: #4B5563;
        --text-tertiary: #6B7280;
        --text-muted: #9CA3AF;
        --text-inverse: #FFFFFF;
        
        --border-color: #E5E7EB;
        --border-light: #F3F4F6;
        --border-strong: #D1D5DB;
        
        --accent-primary: #7C3AED;
        --accent-secondary: #EC4899;
        --accent-gradient: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
        --accent-hover: #6D28D9;
        --accent-light: rgba(124, 58, 237, 0.1);
        
        --code-bg: #1E1E1E;
        --code-text: #D4D4D4;
        
        --message-user-bg: #F3F4F6;
    }
}