/**
 * DataStream Platform v3 - Theme System
 * Version: 3.27.2
 * Last Updated: 2025-10-05
 *
 * Provides dark and light theme support with CSS custom properties
 * Default theme: dark
 */

/* Root variables - Brand colors */
:root {
    /* Primary brand colors - consistent across themes */
    --gradient-start: #667eea;
    --gradient-end: #764ba2;
}

/* Dark Theme (Default) */
:root,
[data-theme="dark"] {
    /* Dark Theme Colors */
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --bg-tertiary: #4a5568;
    --bg-card: #2d3748;
    --bg-elevated: #374151;
    --bg-input: #374151;
    --bg-hover: #4a5568;

    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e0;
    --text-muted: #a0aec0;
    --text-inverse: #1a202c;

    --border-primary: #4a5568;
    --border-secondary: #2d3748;
    --border-focus: var(--gradient-start);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);

    --overlay-bg: rgba(0, 0, 0, 0.7);

    /* Status colors - adjusted for dark theme */
    --success-bg: #064e3b;
    --success-text: #6ee7b7;
    --success-border: #047857;

    --error-bg: #7f1d1d;
    --error-text: #fca5a5;
    --error-border: #991b1b;

    --warning-bg: #78350f;
    --warning-text: #fcd34d;
    --warning-border: #92400e;

    --info-bg: #1e3a8a;
    --info-text: #93c5fd;
    --info-border: #1e40af;

    /* Gradient overlays */
    --gradient-opacity-light: rgba(102, 126, 234, 0.1);
    --gradient-opacity-medium: rgba(102, 126, 234, 0.2);
    --gradient-opacity-strong: rgba(102, 126, 234, 0.3);

    /* Button states - Dark theme */
    --btn-secondary-bg: #4a5568;
    --btn-secondary-hover: #5a6578;
    --btn-success-bg: #065f46;
    --btn-success-hover: #047857;
    --btn-success-border: #10b981;
    --btn-warning-bg: #92400e;
    --btn-warning-hover: #b45309;
    --btn-warning-border: #f59e0b;
    --btn-danger-bg: #991b1b;
    --btn-danger-hover: #b91c1c;
    --btn-danger-border: #ef4444;

    /* Disabled states */
    --disabled-bg: #374151;
    --disabled-text: #6b7280;

    /* Code blocks */
    --code-bg: #374151;
    --code-text: #e2e8f0;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #f7fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #edf2f7;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f7fafc;

    --text-primary: #1a202c;
    --text-secondary: #2d3748;
    --text-tertiary: #4a5568;
    --text-muted: #718096;
    --text-inverse: #ffffff;

    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e0;
    --border-focus: var(--gradient-start);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);

    --overlay-bg: rgba(0, 0, 0, 0.5);

    /* Status colors - adjusted for light theme */
    --success-bg: #d1fae5;
    --success-text: #065f46;
    --success-border: #10b981;

    --error-bg: #fee;
    --error-text: #c33;
    --error-border: #fcc;

    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --warning-border: #f59e0b;

    --info-bg: #dbeafe;
    --info-text: #1e40af;
    --info-border: #3b82f6;

    /* Gradient overlays */
    --gradient-opacity-light: rgba(102, 126, 234, 0.1);
    --gradient-opacity-medium: rgba(102, 126, 234, 0.2);
    --gradient-opacity-strong: rgba(102, 126, 234, 0.3);

    /* Button states - Light theme */
    --btn-secondary-bg: #e5e7eb;
    --btn-secondary-hover: #d1d5db;
    --btn-success-bg: #10b981;
    --btn-success-hover: #059669;
    --btn-success-border: #10b981;
    --btn-warning-bg: #f59e0b;
    --btn-warning-hover: #d97706;
    --btn-warning-border: #f59e0b;
    --btn-danger-bg: #ef4444;
    --btn-danger-hover: #dc2626;
    --btn-danger-border: #ef4444;

    /* Disabled states */
    --disabled-bg: #f3f4f6;
    --disabled-text: #9ca3af;

    /* Code blocks */
    --code-bg: #f9fafb;
    --code-text: #1f2937;
}

/* Theme toggle button styles */
.theme-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
    z-index: 1000;
    color: white;
}

.theme-toggle:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-xl);
}

.theme-toggle:active {
    transform: translateY(-1px) scale(1.02);
}

/* Smooth theme transitions - targeted selectors for better performance */
body,
.themed-card,
.themed-input,
.themed-modal,
[class*="btn-"],
[class*="status-"],
[class*="badge-"],
[class*="provider-"],
[class*="stream-"],
[class*="workflow-"],
[class*="message-"],
.navbar,
.modal-content,
.toast,
table,
thead,
tbody,
tr,
td,
th {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Override transition for interactive states */
*:focus,
*:active,
.no-theme-transition {
    transition: none;
}

/* Utility classes for common theme-aware components */
.themed-card {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
}

.themed-input {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 2px solid var(--border-primary);
}

.themed-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--gradient-opacity-light);
}

.themed-modal {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xl);
}

.themed-text-primary {
    color: var(--text-primary);
}

.themed-text-secondary {
    color: var(--text-secondary);
}

.themed-text-muted {
    color: var(--text-muted);
}

/* Status badge variants */
.status-badge-success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.status-badge-error {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

.status-badge-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}

.status-badge-info {
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
}