/* =============================================================================
   THEME SYSTEM - COLOR PALETTES
   Multi-theme support for Teachable Machine application
   ============================================================================= */

/* =============================================================================
   BASE THEME VARIABLES (Classic Theme - Default)
   Original purple/indigo theme
   ============================================================================= */
:root {
    /* Primary Colors - Purple/Indigo Theme */
    --theme-primary: #6366f1;
    --theme-primary-hover: #5b5ad6;
    --theme-primary-light: #f0f0ff;
    --theme-primary-dark: #4c46d9;
    --theme-primary-50: #eef2ff;
    --theme-primary-100: #e0e7ff;
    --theme-primary-200: #c7d2fe;
    --theme-primary-300: #a5b4fc;
    --theme-primary-400: #818cf8;
    --theme-primary-500: #6366f1;
    --theme-primary-600: #5b5ad6;
    --theme-primary-700: #4c46d9;
    --theme-primary-800: #3730a3;
    --theme-primary-900: #312e81;

    /* Secondary Colors */
    --theme-secondary: #8b5cf6;
    --theme-secondary-hover: #7c3aed;
    --theme-secondary-light: #f3e8ff;
    --theme-secondary-dark: #6d28d9;

    /* Accent Colors */
    --theme-accent: #06b6d4;
    --theme-accent-hover: #0891b2;
    --theme-accent-light: #cffafe;
    --theme-accent-dark: #0e7490;

    /* Action Colors */
    --theme-action-blue: #3b82f6;
    --theme-action-blue-hover: #2563eb;
    --theme-action-blue-light: #dbeafe;

    /* Status Colors */
    --theme-success: #10b981;
    --theme-success-light: #d1fae5;
    --theme-danger: #ef4444;
    --theme-danger-light: #fee2e2;
    --theme-warning: #f59e0b;
    --theme-warning-light: #fef3c7;
    --theme-info: #3b82f6;
    --theme-info-light: #dbeafe;

    /* Neutral Colors */
    --theme-gray-50: #f9fafb;
    --theme-gray-100: #f3f4f6;
    --theme-gray-200: #e5e7eb;
    --theme-gray-300: #d1d5db;
    --theme-gray-400: #9ca3af;
    --theme-gray-500: #6b7280;
    --theme-gray-600: #4b5563;
    --theme-gray-700: #374151;
    --theme-gray-800: #1f2937;
    --theme-gray-900: #111827;

    /* Background Colors */
    --theme-background: linear-gradient(135deg, #f0f2ff 0%, #e8f4fd 100%);
    --theme-background-solid: #ffffff;
    --theme-background-secondary: #f9fafb;
    --theme-surface: #ffffff;
    --theme-surface-secondary: #f8fafc;

    /* Text Colors */
    --theme-text-primary: #374151;
    --theme-text-secondary: #6b7280;
    --theme-text-inverse: #ffffff;

    /* Border Colors */
    --theme-border: #e5e7eb;
    --theme-border-light: #f3f4f6;
    --theme-border-dark: #d1d5db;

    /* Shadow System - Enhanced for professional look */
    --theme-shadow-sm: 0 1px 2px 0 rgb(33 41 60 / 0.05);
    --theme-shadow-md: 0 4px 6px -1px rgb(33 41 60 / 0.1), 0 2px 4px -2px rgb(33 41 60 / 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgb(33 41 60 / 0.1), 0 4px 6px -4px rgb(33 41 60 / 0.1);
    --theme-shadow-xl: 0 20px 25px -5px rgb(33 41 60 / 0.1), 0 8px 10px -6px rgb(33 41 60 / 0.1);

    /* Component Specific */
    --theme-button-primary: var(--theme-primary);
    --theme-button-primary-hover: var(--theme-primary-hover);
    --theme-button-accent: var(--theme-accent);
    --theme-button-accent-hover: var(--theme-accent-hover);
    --theme-input-border: var(--theme-border);
    --theme-input-focus: var(--theme-primary);
}

/* =============================================================================
   MDZ HAMBURG THEME - Official Mittelstand Digital Zentrum Hamburg theme
   ============================================================================= */
[data-theme="mdz-hamburg"] {
    /* Primary Colors - Navy Blue Theme */
    --theme-primary: #21293C;
    --theme-primary-hover: #1A1F2E;
    --theme-primary-light: #F7F8F9;
    --theme-primary-dark: #16192A;

    /* Secondary Colors - Steel Blue */
    --theme-secondary: #435B72;
    --theme-secondary-hover: #37485C;
    --theme-secondary-light: #F0F4F7;
    --theme-secondary-dark: #2D3D52;

    /* Accent Colors - Red */
    --theme-accent: #B41F28;
    --theme-accent-hover: #8F1921;
    --theme-accent-light: #E24A52;
    --theme-accent-dark: #7A1519;

    /* Status Colors - Harmonized with navy theme */
    --theme-success: #16A34A;
    --theme-success-light: #dcfce7;
    --theme-danger: #B41F28;
    --theme-danger-light: #fee2e2;
    --theme-warning: #EA580C;
    --theme-warning-light: #fed7aa;
    --theme-info: #2D5BD3;
    --theme-info-light: #e8efff;

    /* Background Colors */
    --theme-background: linear-gradient(135deg, #F7F8F9 0%, #EDEDEE 100%);
    --theme-background-solid: #F7F8F9;
    --theme-background-secondary: #EDEDEE;
    --theme-surface: #FFFFFF;
    --theme-surface-secondary: #F7F8F9;

    /* Text Colors */
    --theme-text-primary: #37404B;
    --theme-text-secondary: #6B7280;
    --theme-text-inverse: #FFFFFF;

    /* Button overrides */
    --theme-button-primary: var(--theme-primary);
    --theme-button-primary-hover: var(--theme-primary-hover);
}

/* =============================================================================
   RED ACCENT THEME - Alternative with Red Primary Colors
   ============================================================================= */
[data-theme="red-accent"] {
    /* Primary Colors - Brand Red */
    --theme-primary: #B41F28;
    --theme-primary-hover: #8F1921;
    --theme-primary-light: #FDF2F2;
    --theme-primary-dark: #7A1519;

    /* Secondary Colors */
    --theme-secondary: #1D1D1B;
    --theme-secondary-hover: #2D2D2B;
    --theme-secondary-light: #F5F5F5;
    --theme-secondary-dark: #0F0F0F;

    /* Status Colors - Adjusted for red theme */
    --theme-success: #16A34A;
    --theme-success-light: #dcfce7;
    --theme-danger: #B41F28;
    --theme-danger-light: #fee2e2;
    --theme-warning: #EA580C;
    --theme-warning-light: #fed7aa;
    --theme-info: #2D5BD3;
    --theme-info-light: #e8efff;

    /* Background with red undertones */
    --theme-background: linear-gradient(135deg, #fef2f2 0%, #fdf8f8 100%);
    --theme-background-solid: #ffffff;
    --theme-background-secondary: #fefbfb;
    --theme-surface: #ffffff;
    --theme-surface-secondary: #fefcfc;

    /* Text Colors */
    --theme-text-primary: #1D1D1B;
    --theme-text-secondary: #4A4A4A;
    --theme-text-inverse: #ffffff;

    /* Button overrides */
    --theme-button-primary: var(--theme-primary);
    --theme-button-primary-hover: var(--theme-primary-hover);
}

/* =============================================================================
   DARK THEME - For accessibility and modern preference
   ============================================================================= */
[data-theme="dark"] {
    /* Primary Colors - Maintaining brand red in dark context */
    --theme-primary: #EF4444; /* Brighter red for dark backgrounds */
    --theme-primary-hover: #F87171;
    --theme-primary-light: #1F1415; /* Dark red background */
    --theme-primary-dark: #DC2626;

    /* Secondary Colors */
    --theme-secondary: #6B7280;
    --theme-secondary-hover: #9CA3AF;
    --theme-secondary-light: #1F2937;
    --theme-secondary-dark: #374151;

    /* Status Colors - Dark theme variants */
    --theme-success: #22C55E;
    --theme-success-light: #14532D;
    --theme-danger: #EF4444;
    --theme-danger-light: #451A1A;
    --theme-warning: #F59E0B;
    --theme-warning-light: #451A03;
    --theme-info: #3B82F6;
    --theme-info-light: #1E3A8A;

    /* Dark Neutral Colors */
    --theme-gray-50: #0F172A;
    --theme-gray-100: #1E293B;
    --theme-gray-200: #334155;
    --theme-gray-300: #475569;
    --theme-gray-400: #64748B;
    --theme-gray-500: #94A3B8;
    --theme-gray-600: #CBD5E1;
    --theme-gray-700: #E2E8F0;
    --theme-gray-800: #F1F5F9;
    --theme-gray-900: #F8FAFC;

    /* Dark Backgrounds */
    --theme-background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --theme-background-solid: #0F172A;
    --theme-background-secondary: #1E293B;
    --theme-surface: #1E293B;
    --theme-surface-secondary: #334155;

    /* Dark Text Colors */
    --theme-text-primary: #F8FAFC;
    --theme-text-secondary: #CBD5E1;
    --theme-text-inverse: #0F172A;

    /* Dark Borders */
    --theme-border: #334155;
    --theme-border-light: #475569;
    --theme-border-dark: #1E293B;

    /* Enhanced shadows for dark theme */
    --theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --theme-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}

/* =============================================================================
   HIGH CONTRAST THEME - For accessibility compliance
   ============================================================================= */
[data-theme="high-contrast"] {
    /* High contrast colors */
    --theme-primary: #000000;
    --theme-primary-hover: #333333;
    --theme-primary-light: #F0F0F0;
    --theme-primary-dark: #000000;

    /* Secondary Colors */
    --theme-secondary: #FFFFFF;
    --theme-secondary-hover: #F0F0F0;
    --theme-secondary-light: #000000;
    --theme-secondary-dark: #FFFFFF;

    /* Status Colors - High contrast variants */
    --theme-success: #006600;
    --theme-success-light: #E6FFE6;
    --theme-danger: #CC0000;
    --theme-danger-light: #FFE6E6;
    --theme-warning: #FF6600;
    --theme-warning-light: #FFF2E6;
    --theme-info: #0066CC;
    --theme-info-light: #E6F2FF;

    /* High contrast backgrounds */
    --theme-background: #FFFFFF;
    --theme-background-solid: #FFFFFF;
    --theme-background-secondary: #F8F8F8;
    --theme-surface: #FFFFFF;
    --theme-surface-secondary: #F0F0F0;

    /* High contrast text */
    --theme-text-primary: #000000;
    --theme-text-secondary: #333333;
    --theme-text-inverse: #FFFFFF;

    /* High contrast borders */
    --theme-border: #000000;
    --theme-border-light: #666666;
    --theme-border-dark: #000000;

    /* Enhanced shadows for high contrast */
    --theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
    --theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --theme-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

/* =============================================================================
   SYSTEM PREFERENCE DETECTION (DISABLED)
   Automatic theme switching based on system preferences is disabled
   ============================================================================= */

/*
DISABLED: Automatic dark mode and high contrast detection

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --theme-primary: #EF4444;
        --theme-primary-hover: #F87171;
        --theme-background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
        --theme-background-solid: #0F172A;
        --theme-text-primary: #F8FAFC;
        --theme-text-secondary: #CBD5E1;
        --theme-surface: #1E293B;
        --theme-border: #334155;
    }
}

@media (prefers-contrast: high) {
    :root:not([data-theme]) {
        --theme-primary: #000000;
        --theme-background: #FFFFFF;
        --theme-text-primary: #000000;
        --theme-border: #000000;
    }
}
*/

/* =============================================================================
   THEME TRANSITION ANIMATIONS
   ============================================================================= */
:root {
    --theme-transition-duration: 0.3s;
    --theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    transition: 
        background-color var(--theme-transition-duration) var(--theme-transition-timing),
        border-color var(--theme-transition-duration) var(--theme-transition-timing),
        color var(--theme-transition-duration) var(--theme-transition-timing),
        box-shadow var(--theme-transition-duration) var(--theme-transition-timing);
}

/* =============================================================================
   THEME-AWARE COMPONENT UPDATES
   These override the existing component styles to use theme variables
   ============================================================================= */

/* Update existing CSS variables to use theme system */
:root {
    /* Map existing variables to theme system */
    --primary-color: var(--theme-primary);
    --primary-hover: var(--theme-primary-hover);
    --primary-light: var(--theme-primary-light);
    --secondary-color: var(--theme-secondary);
    --success-color: var(--theme-success);
    --danger-color: var(--theme-danger);
    --warning-color: var(--theme-warning);
    --gray-50: var(--theme-gray-50);
    --gray-100: var(--theme-gray-100);
    --gray-200: var(--theme-gray-200);
    --gray-300: var(--theme-gray-300);
    --gray-400: var(--theme-gray-400);
    --gray-500: var(--theme-gray-500);
    --gray-600: var(--theme-gray-600);
    --gray-700: var(--theme-gray-700);
    --gray-800: var(--theme-gray-800);
    --gray-900: var(--theme-gray-900);
    --white: var(--theme-surface);
    --shadow-sm: var(--theme-shadow-sm);
    --shadow-md: var(--theme-shadow-md);
    --shadow-lg: var(--theme-shadow-lg);
    --shadow-xl: var(--theme-shadow-xl);
}

/* Update body background to use theme */
body {
    background: var(--theme-background);
    color: var(--theme-text-primary);
    transition: background-color var(--theme-transition-duration) var(--theme-transition-timing),
                color var(--theme-transition-duration) var(--theme-transition-timing);
}

/* Ensure surfaces use theme colors */
.class-card,
.training-section,
.preview-section,
.sample-interface {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text-primary);
}

/* Header uses dark background like footer */
.header {
    background: var(--theme-gray-800);
    border-color: var(--theme-gray-700);
    color: var(--theme-text-inverse);
}

/* Update text colors */
.class-name,
.section-title {
    color: var(--theme-text-primary);
}

/* Header title uses inverse color for dark background */
.app-title {
    color: var(--theme-text-inverse);
}

.app-subtitle {
    color: var(--theme-gray-400);
}

.samples-label,
.prediction-paused,
.prediction-switching {
    color: var(--theme-text-secondary);
}

/* Footer theme adjustments */
.footer {
    background: var(--theme-gray-800);
    color: var(--theme-text-inverse);
}

.footer-link {
    color: var(--theme-gray-300, #d1d5db);
    border-color: var(--theme-gray-400, #9ca3af);
}

.footer-link:hover {
    color: var(--theme-text-inverse, #ffffff);
    border-color: var(--theme-primary);
    background: var(--theme-primary-light);
}

.footer-link.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-text-inverse);
}

/* Theme-aware button updates */
.train-button {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
}

.train-button:hover {
    background: linear-gradient(135deg, var(--theme-primary-hover) 0%, var(--theme-secondary-hover) 100%);
}

.model-action-btn {
    background: linear-gradient(135deg, var(--theme-primary-light) 0%, #f8faff 100%);
    color: var(--theme-primary);
    border-color: var(--theme-border);
}

.model-action-btn:hover {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    color: var(--theme-text-inverse);
    border-color: var(--theme-primary);
}

/* Sample tab theme updates */
.sample-tab {
    color: var(--theme-text-secondary);
    background: none;
}

.sample-tab.active {
    color: var(--theme-primary);
    background: var(--theme-surface);
}

.sample-tab.active::after {
    background: var(--theme-primary);
}

.sample-tab:hover:not(.active) {
    color: var(--theme-text-primary);
    background: var(--theme-hover);
}

.sample-action-button {
    background: linear-gradient(135deg, var(--theme-primary-light) 0%, #f8faff 100%);
    border-color: var(--theme-border);
    color: var(--theme-primary);
}

.sample-action-button:hover {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    border-color: var(--theme-primary);
    color: var(--theme-text-inverse);
}

/* Theme Dropdown theme-aware styles */
[data-theme="mdz-hamburg"] .theme-dropdown-content {
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

[data-theme="mdz-hamburg"] .theme-option {
    color: var(--theme-text-primary);
}

[data-theme="mdz-hamburg"] .theme-option:hover {
    background: var(--theme-primary-light);
    color: var(--theme-primary);
}

[data-theme="dark"] .theme-dropdown-content {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow-xl);
}

[data-theme="dark"] .theme-option {
    color: var(--theme-text-primary);
}

[data-theme="dark"] .theme-option:hover {
    background: var(--theme-gray-600);
    color: var(--theme-primary);
}

[data-theme="high-contrast"] .theme-dropdown-content {
    background: var(--theme-surface);
    border: 2px solid var(--theme-border);
}

[data-theme="high-contrast"] .theme-option {
    color: var(--theme-text-primary);
    border-bottom: 1px solid var(--theme-border);
}

[data-theme="high-contrast"] .theme-option:hover {
    background: var(--theme-text-primary);
    color: var(--theme-text-inverse);
}