/* theme.css - Centralized theme variables for Subscription Manager */

/* Light Theme (Default) Variables */
:root {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-hover: #f1f5f9;
    --bg-active: #e2e8f0;
    --bg-card: #ffffff;
    --bg-popup: #ffffff;
    
    /* Text Colors */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-highlight: #3b82f6;
    
    /* Border Colors */
    --border-color: #e2e8f0;
    --border-light: rgba(226, 232, 240, 0.5);
    --border-hover: #cbd5e1;
    
    /* Status Colors */
    --status-active: #10b981;
    --status-due-soon: #f59e0b;
    --status-expired: #ef4444;
    
    /* Card and Box Colors */
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --box-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.1);
    
    /* Analytics Box Colors */
    --monthly-color: #4e73df;
    --yearly-color: #1cc88a;
    --next-month-color: #9c27b0;
    --total-spent-color: #f06292;
    
    /* UI Element Colors */
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --danger-color: #ef4444;
    --danger-hover: #dc2626;
    --success-color: #10b981;
    --success-hover: #059669;
    --warning-color: #f59e0b;
    --warning-hover: #d97706;
    
    /* Transition Speed */
    --transition-speed: 0.3s;
}

/* Dark Theme Variables */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-hover: #333333;
    --bg-active: #404040;
    --bg-card: #2d2d2d;
    --bg-popup: #2d2d2d;
    
    /* Text Colors */
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-highlight: #60a5fa;
    
    /* Border Colors */
    --border-color: #404040;
    --border-light: rgba(255, 255, 255, 0.05);
    --border-hover: #4a5568;
    
    /* Status Colors - slightly adjusted for dark mode visibility */
    --status-active: #34d399;
    --status-due-soon: #fbbf24;
    --status-expired: #f87171;
    
    /* Card and Box Colors */
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --box-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.4);
    
    /* Analytics Box Colors - slightly brighter for dark mode */
    --monthly-color: #6082e6;
    --yearly-color: #34d399;
    --next-month-color: #b146c2;
    --total-spent-color: #f37ba0;
    
    /* UI Element Colors - adjusted for dark mode */
    --primary-color: #60a5fa;
    --primary-hover: #3b82f6;
    --danger-color: #f87171;
    --danger-hover: #ef4444;
    --success-color: #34d399;
    --success-hover: #10b981;
    --warning-color: #fbbf24;
    --warning-hover: #f59e0b;
}

/* For backward compatibility with .dark-mode class */
.dark-mode {
    /* Use the same variables as [data-theme="dark"] */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-hover: #333333;
    --bg-active: #404040;
    --bg-card: #2d2d2d;
    --bg-popup: #2d2d2d;
    
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-highlight: #60a5fa;
    
    --border-color: #404040;
    --border-light: rgba(255, 255, 255, 0.05);
    --border-hover: #4a5568;
    
    --status-active: #34d399;
    --status-due-soon: #fbbf24;
    --status-expired: #f87171;
    
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --box-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.4);
    
    --monthly-color: #6082e6;
    --yearly-color: #34d399;
    --next-month-color: #b146c2;
    --total-spent-color: #f37ba0;
    
    --primary-color: #60a5fa;
    --primary-hover: #3b82f6;
    --danger-color: #f87171;
    --danger-hover: #ef4444;
    --success-color: #34d399;
    --success-hover: #10b981;
    --warning-color: #fbbf24;
    --warning-hover: #f59e0b;
}