/* Theme System - CSS Custom Properties */

/* Default Theme: Honda Dark */
:root {
    /* Primary Colors */
    --primary-color: #CC0000;
    --primary-dark: #A00000;
    --primary-darker: #800000;
    
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    
    /* Text Colors */
    --text-primary: #f5f5f5;
    --text-secondary: #c0c0c0;
    --text-tertiary: #999999;
    
    /* Border Colors */
    --border-primary: #404040;
    --border-secondary: #666666;
    
    /* Gradient Colors */
    --gradient-body: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 80%, black 20%) 0%, color-mix(in srgb, var(--primary-darker) 80%, black 20%) 100%);
    --gradient-nav: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    --gradient-button: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    --gradient-button-hover: linear-gradient(45deg, var(--primary-dark), var(--primary-darker));
    --gradient-cta: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    --gradient-section: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    --gradient-card: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    
    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --shadow-primary: rgba(204, 0, 0, 0.3);
    
    /* Special Colors */
    --highlight-bg: #ffcccc;
    --highlight-text: #CC0000;
    --footer-bg: #000000dd;
    
    /* Banner Colors */
    --banner-success: linear-gradient(135deg, #059669 0%, #047551 100%);
    --banner-info: linear-gradient(135deg, #1b59bd 0%, #2563eb 100%);
    --banner-warning: linear-gradient(135deg, #a76e0b 0%, #d97706 100%);
    --banner-text: white;
    --banner-border: rgba(255, 255, 255, 0.2);
    
    /* Update Type Badge Colors */
    --badge-success-bg: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    --badge-success-text: #065f46;
    --badge-info-bg: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --badge-info-text: #1e40af;
    --badge-warning-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --badge-warning-text: #92400e;
}

/* Light Theme */
[data-theme="light"] {
    /* Primary Colors */
    --primary-color: #CC0000;
    --primary-dark: #A00000;
    --primary-darker: #800000;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    
    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #4b5563;
    --text-tertiary: #666666;
    
    /* Border Colors */
    --border-primary: #dee2e6;
    --border-secondary: #ced4da;
    
    /* Gradient Colors */
    --gradient-body: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    --gradient-nav: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    --gradient-button: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    --gradient-button-hover: linear-gradient(45deg, var(--primary-dark), var(--primary-darker));
    --gradient-cta: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    --gradient-section: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
    --gradient-card: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    
    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-medium: rgba(0, 0, 0, 0.12);
    --shadow-heavy: rgba(0, 0, 0, 0.15);
    --shadow-primary: rgba(204, 0, 0, 0.3);
    
    /* Special Colors */
    --highlight-bg: #ffcccc;
    --highlight-text: #CC0000;
    --footer-bg: #1a1a1add;
    
    /* Banner Colors */
    --banner-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --banner-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --banner-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --banner-text: white;
    --banner-border: rgba(0, 0, 0, 0.1);
    
    /* Update Type Badge Colors */
    --badge-success-bg: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    --badge-success-text: #065f46;
    --badge-info-bg: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --badge-info-text: #1e40af;
    --badge-warning-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --badge-warning-text: #92400e;
}

/* Classic Theme (Purple - Original) */
[data-theme="classic"] {
    /* Primary Colors */
    --primary-color: #667eea;
    --primary-dark: #764ba2;
    --primary-darker: #5a67d8;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    
    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #4b5563;
    --text-tertiary: #666666;
    
    /* Border Colors */
    --border-primary: #dee2e6;
    --border-secondary: #ced4da;
    
    /* Gradient Colors */
    --gradient-body: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-darker) 100%);
    --gradient-nav: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-button: linear-gradient(45deg, #ff6b6b, #ee5a24);
    --gradient-button-hover: linear-gradient(45deg, #ee5a24, #d84315);
    --gradient-cta: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-section: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
    --gradient-card: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    
    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.07);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    
    /* Banner Colors */
    --banner-success: linear-gradient(135deg, #0ea06f 0%, #059669 100%);
    --banner-info: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --banner-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --banner-text: white;
    --banner-border: rgba(0, 0, 0, 0.1);
    --shadow-heavy: rgba(0, 0, 0, 0.15);
    --shadow-primary: rgba(102, 126, 234, 0.3);
    
    /* Special Colors */
    --highlight-bg: #e0e7ff;
    --highlight-text: #2563eb;
    --footer-bg: #33333388;
    
    /* Update Type Badge Colors */
    --badge-success-bg: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    --badge-success-text: #065f46;
    --badge-info-bg: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    --badge-info-text: #3730a3;
    --badge-warning-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --badge-warning-text: #92400e;
}

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}