/* Tealfabric Network Builder - Theme System */

/* Theme Variables */
:root {
    /* Tealfabric Light Theme (Default) - Based on Design Guide */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8fafc;
    --theme-bg-tertiary: #f1f5f9;
    --theme-bg-accent: #f0fdfa;
    --theme-bg-surface: #ffffff;
    --theme-bg-card: #ffffff;
    
    --theme-text-primary: #0f172a;
    --theme-text-secondary: #334155;
    --theme-text-muted: #64748b;
    --theme-text-accent: #0d9488;
    --theme-text-link: #0d9488;
    
    --theme-border-primary: #e2e8f0;
    --theme-border-secondary: #cbd5e1;
    --theme-border-accent: #0d9488;
    --theme-border-focus: #f97316;
    
    --theme-shadow-sm: 0 1px 2px 0 rgba(13, 148, 136, 0.05);
    --theme-shadow-md: 0 4px 6px -1px rgba(13, 148, 136, 0.1), 0 2px 4px -1px rgba(13, 148, 136, 0.06);
    --theme-shadow-lg: 0 10px 15px -3px rgba(13, 148, 136, 0.1), 0 4px 6px -2px rgba(13, 148, 136, 0.05);
    --theme-shadow-xl: 0 20px 25px -5px rgba(13, 148, 136, 0.1), 0 10px 10px -5px rgba(13, 148, 136, 0.04);
    
    /* Tealfabric Brand Colors */
    --theme-teal-50: #f0fdfa;
    --theme-teal-100: #ccfbf1;
    --theme-teal-200: #99f6e4;
    --theme-teal-300: #5eead4;
    --theme-teal-400: #2dd4bf;
    --theme-teal-500: #14b8a6;
    --theme-teal-600: #0d9488;
    --theme-teal-700: #0f766e;
    --theme-teal-800: #115e59;
    --theme-teal-900: #134e4a;
    
    /* Orange Accent Colors */
    --theme-orange-50: #fff7ed;
    --theme-orange-100: #ffedd5;
    --theme-orange-200: #fed7aa;
    --theme-orange-300: #fdba74;
    --theme-orange-400: #fb923c;
    --theme-orange-500: #f97316;
    --theme-orange-600: #ea580c;
    --theme-orange-700: #c2410c;
    --theme-orange-800: #9a3412;
    --theme-orange-900: #7c2d12;
    
    /* Gradients */
    --theme-gradient-primary: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    --theme-gradient-secondary: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --theme-gradient-accent: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    --theme-gradient-orange: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    --theme-gradient-teal-orange: linear-gradient(135deg, #0d9488 0%, #f97316 100%);
    
    /* Status Colors */
    --theme-success: #10b981;
    --theme-warning: #f59e0b;
    --theme-error: #ef4444;
    --theme-info: #0d9488;
    
    /* Interactive States */
    --theme-hover-bg: #f0fdfa;
    --theme-hover-border: #0d9488;
    --theme-focus-ring: rgba(13, 148, 136, 0.3);
    --theme-active-bg: #e0f2fe;
}

/* Dark Theme - Tealfabric Branded */
[data-theme="dark"] {
    --theme-bg-primary: #0f172a;
    --theme-bg-secondary: #1e293b;
    --theme-bg-tertiary: #334155;
    --theme-bg-accent: #0c4a6e;
    --theme-bg-surface: #1e293b;
    --theme-bg-card: #1e293b;
    
    --theme-text-primary: #f8fafc;
    --theme-text-secondary: #cbd5e1;
    --theme-text-muted: #94a3b8;
    --theme-text-accent: #5eead4;
    --theme-text-link: #5eead4;
    
    --theme-border-primary: #334155;
    --theme-border-secondary: #475569;
    --theme-border-accent: #0d9488;
    --theme-border-focus: #fb923c;
    
    --theme-shadow-sm: 0 1px 2px 0 rgba(13, 148, 136, 0.2);
    --theme-shadow-md: 0 4px 6px -1px rgba(13, 148, 136, 0.25), 0 2px 4px -1px rgba(13, 148, 136, 0.2);
    --theme-shadow-lg: 0 10px 15px -3px rgba(13, 148, 136, 0.25), 0 4px 6px -2px rgba(13, 148, 136, 0.2);
    --theme-shadow-xl: 0 20px 25px -5px rgba(13, 148, 136, 0.25), 0 10px 10px -5px rgba(13, 148, 136, 0.2);
    
    /* Tealfabric Brand Colors - Dark Variants */
    --theme-teal-50: #0c4a6e;
    --theme-teal-100: #0e7490;
    --theme-teal-200: #0891b2;
    --theme-teal-300: #0ea5e9;
    --theme-teal-400: #38bdf8;
    --theme-teal-500: #5eead4;
    --theme-teal-600: #2dd4bf;
    --theme-teal-700: #14b8a6;
    --theme-teal-800: #0d9488;
    --theme-teal-900: #0f766e;
    
    /* Orange Accent Colors - Dark Variants */
    --theme-orange-50: #7c2d12;
    --theme-orange-100: #9a3412;
    --theme-orange-200: #c2410c;
    --theme-orange-300: #ea580c;
    --theme-orange-400: #f97316;
    --theme-orange-500: #fb923c;
    --theme-orange-600: #fdba74;
    --theme-orange-700: #fed7aa;
    --theme-orange-800: #ffedd5;
    --theme-orange-900: #fff7ed;
    
    /* Gradients */
    --theme-gradient-primary: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    --theme-gradient-secondary: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --theme-gradient-accent: linear-gradient(135deg, #0c4a6e 0%, #0e7490 100%);
    --theme-gradient-orange: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    --theme-gradient-teal-orange: linear-gradient(135deg, #0d9488 0%, #f97316 100%);
    
    /* Status Colors */
    --theme-success: #059669;
    --theme-warning: #d97706;
    --theme-error: #dc2626;
    --theme-info: #0d9488;
    
    /* Interactive States */
    --theme-hover-bg: #0c4a6e;
    --theme-hover-border: #0d9488;
    --theme-focus-ring: rgba(94, 234, 212, 0.3);
    --theme-active-bg: #0e7490;
}

/* High Contrast Theme - Tealfabric Branded */
[data-theme="high-contrast"] {
    --theme-bg-primary: #000000;
    --theme-bg-secondary: #0a0a0a;
    --theme-bg-tertiary: #1a1a1a;
    --theme-bg-accent: #0d9488;
    --theme-bg-surface: #0a0a0a;
    --theme-bg-card: #0a0a0a;
    
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #0d9488;
    --theme-text-muted: #f97316;
    --theme-text-accent: #0d9488;
    --theme-text-link: #0d9488;
    
    --theme-border-primary: #0d9488;
    --theme-border-secondary: #f97316;
    --theme-border-accent: #0d9488;
    --theme-border-focus: #f97316;
    
    --theme-shadow-sm: 0 1px 2px 0 rgba(13, 148, 136, 0.5);
    --theme-shadow-md: 0 4px 6px -1px rgba(13, 148, 136, 0.6), 0 2px 4px -1px rgba(13, 148, 136, 0.5);
    --theme-shadow-lg: 0 10px 15px -3px rgba(13, 148, 136, 0.6), 0 4px 6px -2px rgba(13, 148, 136, 0.5);
    --theme-shadow-xl: 0 20px 25px -5px rgba(13, 148, 136, 0.6), 0 10px 10px -5px rgba(13, 148, 136, 0.5);
    
    /* Tealfabric Brand Colors - High Contrast */
    --theme-teal-50: #0d9488;
    --theme-teal-100: #0d9488;
    --theme-teal-200: #0d9488;
    --theme-teal-300: #0d9488;
    --theme-teal-400: #0d9488;
    --theme-teal-500: #0d9488;
    --theme-teal-600: #0d9488;
    --theme-teal-700: #0d9488;
    --theme-teal-800: #0d9488;
    --theme-teal-900: #0d9488;
    
    /* Orange Accent Colors - High Contrast */
    --theme-orange-50: #f97316;
    --theme-orange-100: #f97316;
    --theme-orange-200: #f97316;
    --theme-orange-300: #f97316;
    --theme-orange-400: #f97316;
    --theme-orange-500: #f97316;
    --theme-orange-600: #f97316;
    --theme-orange-700: #f97316;
    --theme-orange-800: #f97316;
    --theme-orange-900: #f97316;
    
    /* Gradients */
    --theme-gradient-primary: linear-gradient(135deg, #0d9488 0%, #0d9488 100%);
    --theme-gradient-secondary: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    --theme-gradient-accent: linear-gradient(135deg, #0d9488 0%, #0d9488 100%);
    --theme-gradient-orange: linear-gradient(135deg, #f97316 0%, #f97316 100%);
    --theme-gradient-teal-orange: linear-gradient(135deg, #0d9488 0%, #f97316 100%);
    
    /* Status Colors */
    --theme-success: #00ff00;
    --theme-warning: #ffff00;
    --theme-error: #ff0000;
    --theme-info: #0d9488;
    
    /* Interactive States */
    --theme-hover-bg: #0d9488;
    --theme-hover-border: #f97316;
    --theme-focus-ring: rgba(13, 148, 136, 0.8);
    --theme-active-bg: #0d9488;
}

/* Auto Theme (System Preference) - Tealfabric Branded */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --theme-bg-primary: #0f172a;
        --theme-bg-secondary: #1e293b;
        --theme-bg-tertiary: #334155;
        --theme-bg-accent: #0c4a6e;
        --theme-bg-surface: #1e293b;
        --theme-bg-card: #1e293b;
        
        --theme-text-primary: #f8fafc;
        --theme-text-secondary: #cbd5e1;
        --theme-text-muted: #94a3b8;
        --theme-text-accent: #5eead4;
        --theme-text-link: #5eead4;
        
        --theme-border-primary: #334155;
        --theme-border-secondary: #475569;
        --theme-border-accent: #0d9488;
        --theme-border-focus: #fb923c;
        
        --theme-shadow-sm: 0 1px 2px 0 rgba(13, 148, 136, 0.2);
        --theme-shadow-md: 0 4px 6px -1px rgba(13, 148, 136, 0.25), 0 2px 4px -1px rgba(13, 148, 136, 0.2);
        --theme-shadow-lg: 0 10px 15px -3px rgba(13, 148, 136, 0.25), 0 4px 6px -2px rgba(13, 148, 136, 0.2);
        --theme-shadow-xl: 0 20px 25px -5px rgba(13, 148, 136, 0.25), 0 10px 10px -5px rgba(13, 148, 136, 0.2);
        
        /* Tealfabric Brand Colors - Dark Variants */
        --theme-teal-50: #0c4a6e;
        --theme-teal-100: #0e7490;
        --theme-teal-200: #0891b2;
        --theme-teal-300: #0ea5e9;
        --theme-teal-400: #38bdf8;
        --theme-teal-500: #5eead4;
        --theme-teal-600: #2dd4bf;
        --theme-teal-700: #14b8a6;
        --theme-teal-800: #0d9488;
        --theme-teal-900: #0f766e;
        
        /* Orange Accent Colors - Dark Variants */
        --theme-orange-50: #7c2d12;
        --theme-orange-100: #9a3412;
        --theme-orange-200: #c2410c;
        --theme-orange-300: #ea580c;
        --theme-orange-400: #f97316;
        --theme-orange-500: #fb923c;
        --theme-orange-600: #fdba74;
        --theme-orange-700: #fed7aa;
        --theme-orange-800: #ffedd5;
        --theme-orange-900: #fff7ed;
        
        /* Gradients */
        --theme-gradient-primary: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
        --theme-gradient-secondary: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        --theme-gradient-accent: linear-gradient(135deg, #0c4a6e 0%, #0e7490 100%);
        --theme-gradient-orange: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        --theme-gradient-teal-orange: linear-gradient(135deg, #0d9488 0%, #f97316 100%);
        
        /* Status Colors */
        --theme-success: #059669;
        --theme-warning: #d97706;
        --theme-error: #dc2626;
        --theme-info: #0d9488;
        
        /* Interactive States */
        --theme-hover-bg: #0c4a6e;
        --theme-hover-border: #0d9488;
        --theme-focus-ring: rgba(94, 234, 212, 0.3);
        --theme-active-bg: #0e7490;
    }
}

/* Theme Transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Theme Utility Classes */
.theme-bg-primary { background-color: var(--theme-bg-primary); }
.theme-bg-secondary { background-color: var(--theme-bg-secondary); }
.theme-bg-tertiary { background-color: var(--theme-bg-tertiary); }
.theme-bg-accent { background-color: var(--theme-bg-accent); }
.theme-bg-surface { background-color: var(--theme-bg-surface); }
.theme-bg-card { background-color: var(--theme-bg-card); }

.theme-text-primary { color: var(--theme-text-primary); }
.theme-text-secondary { color: var(--theme-text-secondary); }
.theme-text-muted { color: var(--theme-text-muted); }
.theme-text-accent { color: var(--theme-text-accent); }
.theme-text-link { color: var(--theme-text-link); }

.theme-border-primary { border-color: var(--theme-border-primary); }
.theme-border-secondary { border-color: var(--theme-border-secondary); }
.theme-border-accent { border-color: var(--theme-border-accent); }
.theme-border-focus { border-color: var(--theme-border-focus); }

.theme-shadow-sm { box-shadow: var(--theme-shadow-sm); }
.theme-shadow-md { box-shadow: var(--theme-shadow-md); }
.theme-shadow-lg { box-shadow: var(--theme-shadow-lg); }
.theme-shadow-xl { box-shadow: var(--theme-shadow-xl); }

.theme-gradient-primary { background: var(--theme-gradient-primary); }
.theme-gradient-secondary { background: var(--theme-gradient-secondary); }
.theme-gradient-accent { background: var(--theme-gradient-accent); }
.theme-gradient-orange { background: var(--theme-gradient-orange); }
.theme-gradient-teal-orange { background: var(--theme-gradient-teal-orange); }

/* Tealfabric Brand Color Utilities */
.theme-teal-50 { background-color: var(--theme-teal-50); }
.theme-teal-100 { background-color: var(--theme-teal-100); }
.theme-teal-200 { background-color: var(--theme-teal-200); }
.theme-teal-300 { background-color: var(--theme-teal-300); }
.theme-teal-400 { background-color: var(--theme-teal-400); }
.theme-teal-500 { background-color: var(--theme-teal-500); }
.theme-teal-600 { background-color: var(--theme-teal-600); }
.theme-teal-700 { background-color: var(--theme-teal-700); }
.theme-teal-800 { background-color: var(--theme-teal-800); }
.theme-teal-900 { background-color: var(--theme-teal-900); }

.theme-text-teal-50 { color: var(--theme-teal-50); }
.theme-text-teal-100 { color: var(--theme-teal-100); }
.theme-text-teal-200 { color: var(--theme-teal-200); }
.theme-text-teal-300 { color: var(--theme-teal-300); }
.theme-text-teal-400 { color: var(--theme-teal-400); }
.theme-text-teal-500 { color: var(--theme-teal-500); }
.theme-text-teal-600 { color: var(--theme-teal-600); }
.theme-text-teal-700 { color: var(--theme-teal-700); }
.theme-text-teal-800 { color: var(--theme-teal-800); }
.theme-text-teal-900 { color: var(--theme-teal-900); }

/* Orange Accent Color Utilities */
.theme-orange-50 { background-color: var(--theme-orange-50); }
.theme-orange-100 { background-color: var(--theme-orange-100); }
.theme-orange-200 { background-color: var(--theme-orange-200); }
.theme-orange-300 { background-color: var(--theme-orange-300); }
.theme-orange-400 { background-color: var(--theme-orange-400); }
.theme-orange-500 { background-color: var(--theme-orange-500); }
.theme-orange-600 { background-color: var(--theme-orange-600); }
.theme-orange-700 { background-color: var(--theme-orange-700); }
.theme-orange-800 { background-color: var(--theme-orange-800); }
.theme-orange-900 { background-color: var(--theme-orange-900); }

.theme-text-orange-50 { color: var(--theme-orange-50); }
.theme-text-orange-100 { color: var(--theme-orange-100); }
.theme-text-orange-200 { color: var(--theme-orange-200); }
.theme-text-orange-300 { color: var(--theme-orange-300); }
.theme-text-orange-400 { color: var(--theme-orange-400); }
.theme-text-orange-500 { color: var(--theme-orange-500); }
.theme-text-orange-600 { color: var(--theme-orange-600); }
.theme-text-orange-700 { color: var(--theme-orange-700); }
.theme-text-orange-800 { color: var(--theme-orange-800); }
.theme-text-orange-900 { color: var(--theme-orange-900); }

/* Interactive State Utilities */
.theme-hover-bg { background-color: var(--theme-hover-bg); }
.theme-hover-border { border-color: var(--theme-hover-border); }
.theme-focus-ring { box-shadow: 0 0 0 3px var(--theme-focus-ring); }
.theme-active-bg { background-color: var(--theme-active-bg); }