/* SparkCast Theme System - Light/Dark Mode with Gradient Accents */

/* Light Theme */
:root {
    color-scheme: light;
    
    /* Background colors */
    --bg-app: #f0f1f5;
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fb;
    --bg-tertiary: #f0f1f5;
    --bg-hover: #eef0f4;
    --bg-active: #e2e4ea;
    
    /* Text colors */
    --text-primary: #1a1d26;
    --text-secondary: #4a5068;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;
    
    /* Border colors */
    --border-primary: #e2e4ea;
    --border-secondary: #d1d5de;
    --border-focus: #4f46e5;
    
    /* Accent / Brand colors */
    --accent-primary: #4f46e5;
    --accent-primary-hover: #4338ca;
    --accent-secondary: #7c3aed;
    --accent-danger: #ef4444;
    --accent-danger-hover: #dc2626;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #4f46e5, #7c3aed);
    --gradient-accent: linear-gradient(135deg, #6366f1, #a78bfa);
    --gradient-subtle: linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(124, 58, 237, 0.06));
    --gradient-sidebar: linear-gradient(180deg, #1e1b4b, #1a1d2e);
    --gradient-card-border: linear-gradient(135deg, rgba(79, 70, 229, 0.3), rgba(124, 58, 237, 0.1));
    --gradient-success: linear-gradient(135deg, #059669, #10b981);
    --gradient-danger: linear-gradient(135deg, #dc2626, #ef4444);
    
    /* Status colors */
    --status-online: #10b981;
    --status-online-bg: rgba(16, 185, 129, 0.1);
    --status-offline: #ef4444;
    --status-offline-bg: rgba(239, 68, 68, 0.1);
    --status-warning: #f59e0b;
    --status-warning-bg: rgba(245, 158, 11, 0.1);
    
    /* Button colors */
    --btn-primary-bg: var(--gradient-primary);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: linear-gradient(135deg, #4338ca, #6d28d9);
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #4a5068;
    --btn-secondary-border: #d1d5de;
    --btn-secondary-hover: #f0f1f5;
    
    /* Input colors */
    --input-bg: #ffffff;
    --input-border: #d1d5de;
    --input-border-focus: #4f46e5;
    --input-placeholder: #9ca3af;
    
    /* Table colors */
    --table-header-bg: #f8f9fb;
    --table-row-hover: #f0f1f5;
    --table-row-alt: #f8f9fb;
    --table-border: #e2e4ea;
    
    /* Sidebar colors */
    --sidebar-bg: #1e1b4b;
    --sidebar-text: #a5b4cb;
    --sidebar-text-hover: #e0e7ff;
    --sidebar-text-active: #ffffff;
    --sidebar-item-hover: rgba(255, 255, 255, 0.07);
    --sidebar-item-active: rgba(79, 70, 229, 0.25);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    
    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
    --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.1), 0 4px 8px -4px rgb(0 0 0 / 0.06);
    --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.15);
    
    /* Misc */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.2);
    --badge-primary-bg: rgba(79, 70, 229, 0.1);
    --badge-primary-text: #4f46e5;
    --badge-secondary-bg: rgba(107, 114, 128, 0.1);
    --badge-secondary-text: #6b7280;
    --badge-info-bg: rgba(59, 130, 246, 0.1);
    --badge-info-text: #3b82f6;
    
    /* Page background gradient */
    --bg-gradient-mesh:
        radial-gradient(ellipse at 10% 10%, rgba(79, 70, 229, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(124, 58, 237, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(79, 70, 229, 0.015) 0%, transparent 70%);
}

/* Dark Theme */
[data-theme="dark"] {
    color-scheme: dark;
    
    /* Background colors */
    --bg-app: #0c0d14;
    --bg-primary: #151722;
    --bg-secondary: #1a1d2e;
    --bg-tertiary: #222538;
    --bg-hover: #222538;
    --bg-active: #2d3148;
    
    /* Text colors */
    --text-primary: #f0f1f5;
    --text-secondary: #c4c9d8;
    --text-tertiary: #8b92a8;
    --text-muted: #5c6378;
    --text-inverse: #151722;
    
    /* Border colors */
    --border-primary: #222538;
    --border-secondary: #2d3148;
    --border-focus: #6366f1;
    
    /* Accent / Brand colors - brighter for dark bg */
    --accent-primary: #818cf8;
    --accent-primary-hover: #6366f1;
    --accent-secondary: #a78bfa;
    --accent-danger: #f87171;
    --accent-danger-hover: #ef4444;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6366f1, #a78bfa);
    --gradient-accent: linear-gradient(135deg, #818cf8, #c4b5fd);
    --gradient-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(167, 139, 250, 0.08));
    --gradient-sidebar: linear-gradient(180deg, #0c0a1f, #0c0d14);
    --gradient-card-border: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(167, 139, 250, 0.08));
    --gradient-success: linear-gradient(135deg, #059669, #34d399);
    --gradient-danger: linear-gradient(135deg, #ef4444, #f87171);
    
    /* Status colors */
    --status-online: #34d399;
    --status-online-bg: rgba(52, 211, 153, 0.12);
    --status-offline: #f87171;
    --status-offline-bg: rgba(248, 113, 113, 0.12);
    --status-warning: #fbbf24;
    --status-warning-bg: rgba(251, 191, 36, 0.12);
    
    /* Button colors */
    --btn-primary-bg: var(--gradient-primary);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: linear-gradient(135deg, #4f46e5, #8b5cf6);
    --btn-secondary-bg: #1a1d2e;
    --btn-secondary-text: #c4c9d8;
    --btn-secondary-border: #2d3148;
    --btn-secondary-hover: #222538;
    
    /* Input colors */
    --input-bg: #1a1d2e;
    --input-border: #2d3148;
    --input-border-focus: #6366f1;
    --input-placeholder: #5c6378;
    
    /* Table colors */
    --table-header-bg: #1a1d2e;
    --table-row-hover: #1e2133;
    --table-row-alt: #171a28;
    --table-border: #222538;
    
    /* Sidebar colors */
    --sidebar-bg: #0c0a1f;
    --sidebar-text: #7b83a0;
    --sidebar-text-hover: #c4b5fd;
    --sidebar-text-active: #ffffff;
    --sidebar-item-hover: rgba(99, 102, 241, 0.08);
    --sidebar-item-active: rgba(99, 102, 241, 0.2);
    --sidebar-border: rgba(99, 102, 241, 0.1);
    
    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.4), 0 4px 8px -4px rgb(0 0 0 / 0.3);
    --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.2);
    
    /* Misc */
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.25);
    --badge-primary-bg: rgba(99, 102, 241, 0.15);
    --badge-primary-text: #818cf8;
    --badge-secondary-bg: rgba(139, 146, 168, 0.15);
    --badge-secondary-text: #8b92a8;
    --badge-info-bg: rgba(96, 165, 250, 0.15);
    --badge-info-text: #60a5fa;
    
    /* Page background gradient */
    --bg-gradient-mesh:
        radial-gradient(ellipse at 10% 10%, rgba(99, 102, 241, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(124, 58, 237, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.02) 0%, transparent 70%);
}

/* Theme transition for smooth switching */
body,
.app-container,
.main-content,
.content-wrapper,
.sidebar,
.device-table,
.btn,
.input,
.select,
.modal,
.alert,
.section-card {
    transition: background-color 0.2s ease, 
                color 0.2s ease, 
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Theme toggle button styles */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--border-secondary);
    border-radius: 0.375rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.theme-toggle:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.theme-toggle svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

/* Hide/show icons based on theme */
.theme-toggle .icon-sun {
    display: block;
}

.theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}