/* EdSet - Customizable Theme System */

/* Pure Light Theme (Primary) */
:root {
    /* Primary Colors - Pure Light */
    --primary-color: #f8fafc;
    --primary-dark: #e2e8f0;
    --primary-light: #ffffff;
    --primary-lighter: #f1f5f9;
    
    /* Secondary Colors */
    --secondary-color: #64748b;
    --secondary-dark: #475569;
    --secondary-light: #94a3b8;
    
    /* Success Colors */
    --success-color: #059669;
    --success-dark: #047857;
    --success-light: #10b981;
    --success-lighter: #d1fae5;
    
    /* Warning Colors */
    --warning-color: #d97706;
    --warning-dark: #b45309;
    --warning-light: #f59e0b;
    --warning-lighter: #fef3c7;
    
    /* Danger Colors */
    --danger-color: #dc2626;
    --danger-dark: #b91c1c;
    --danger-light: #ef4444;
    --danger-lighter: #fee2e2;
    
    /* Neutral Colors */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-light: #cbd5e1;
    
    /* Background Colors - Pure Light */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-dark: #0f172a;
    
    /* Border Colors */
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-dark: #cbd5e1;
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Gradient Colors - Pure Light */
    --gradient-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --gradient-secondary: linear-gradient(135deg, #64748b 0%, #475569 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #047857 100%);
    --gradient-warning: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    --gradient-danger: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
}

/* Pure Light Theme (Explicit) */
[data-theme="pure-light"] {
    --primary-color: #f8fafc;
    --primary-dark: #e2e8f0;
    --primary-light: #ffffff;
    --primary-lighter: #f1f5f9;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    
    --gradient-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Blue Theme */
[data-theme="blue"] {
    --primary-color: #2563eb;
    --primary-dark: #1e40af;
    --primary-light: #3b82f6;
    --primary-lighter: #dbeafe;
    
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

/* Purple Theme */
[data-theme="purple"] {
    --primary-color: #7c3aed;
    --primary-dark: #5b21b6;
    --primary-light: #8b5cf6;
    --primary-lighter: #ede9fe;
    
    --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}

/* Orange Theme */
[data-theme="orange"] {
    --primary-color: #ea580c;
    --primary-dark: #c2410c;
    --primary-light: #f97316;
    --primary-lighter: #fed7aa;
    
    --gradient-primary: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
}

/* Pink Theme */
[data-theme="pink"] {
    --primary-color: #db2777;
    --primary-dark: #be185d;
    --primary-light: #ec4899;
    --primary-lighter: #fce7f3;
    
    --gradient-primary: linear-gradient(135deg, #db2777 0%, #be185d 100%);
}

/* Red Theme */
[data-theme="red"] {
    --primary-color: #dc2626;
    --primary-dark: #b91c1c;
    --primary-light: #ef4444;
    --primary-lighter: #fee2e2;
    
    --gradient-primary: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* Teal Theme */
[data-theme="teal"] {
    --primary-color: #0d9488;
    --primary-dark: #0f766e;
    --primary-light: #14b8a6;
    --primary-lighter: #ccfbf1;
    
    --gradient-primary: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
}

/* Indigo Theme */
[data-theme="indigo"] {
    --primary-color: #4f46e5;
    --primary-dark: #3730a3;
    --primary-light: #6366f1;
    --primary-lighter: #e0e7ff;
    
    --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-light: #64748b;
    
    --border-color: #334155;
    --border-light: #475569;
    --border-dark: #64748b;
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
    --primary-color: #000000;
    --primary-dark: #000000;
    --primary-light: #333333;
    --primary-lighter: #f0f0f0;
    
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --bg-tertiary: #f0f0f0;
    
    --border-color: #000000;
    --border-light: #333333;
    --border-dark: #666666;
}

/* Accessibility Theme */
[data-theme="accessibility"] {
    --font-size-base: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.625rem;
    
    --spacing-md: 1.25rem;
    --spacing-lg: 1.75rem;
    --spacing-xl: 2.25rem;
    
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
}

/* Theme Utility Classes */
.theme-blue { --primary-color: #2563eb; --primary-dark: #1e40af; }
.theme-green { --primary-color: #059669; --primary-dark: #047857; }
.theme-purple { --primary-color: #7c3aed; --primary-dark: #5b21b6; }
.theme-orange { --primary-color: #ea580c; --primary-dark: #c2410c; }
.theme-pink { --primary-color: #db2777; --primary-dark: #be185d; }
.theme-red { --primary-color: #dc2626; --primary-dark: #b91c1c; }
.theme-teal { --primary-color: #0d9488; --primary-dark: #0f766e; }
.theme-indigo { --primary-color: #4f46e5; --primary-dark: #3730a3; }
.theme-pure-light { --primary-color: #f8fafc; --primary-dark: #e2e8f0; }

/* Pure Light Theme Overrides */
[data-theme="pure-light"] body,
body[data-theme="pure-light"] {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="pure-light"] .btn-primary,
body[data-theme="pure-light"] .btn-primary {
    background: var(--gradient-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="pure-light"] .card,
body[data-theme="pure-light"] .card {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

[data-theme="pure-light"] .header,
body[data-theme="pure-light"] .header {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Ensure pure-light theme is applied by default */
:root {
    color-scheme: light;
}

/* Component Styles Using CSS Variables */
.btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition-normal);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.form-control {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    transition: var(--transition-normal);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-lighter);
}

/* Pure Light Theme Specific Styles */
.pure-light-theme {
    --primary-color: #f8fafc;
    --primary-dark: #e2e8f0;
    --primary-light: #ffffff;
    --primary-lighter: #f1f5f9;
}

/* Apply pure-light theme to all elements by default */
* {
    color-scheme: light;
}

/* Ensure proper contrast for pure-light theme */
[data-theme="pure-light"] {
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-light: #cbd5e1;
}

/* Pure Light Theme Component Overrides */
[data-theme="pure-light"] .btn-primary {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="pure-light"] .btn-secondary {
    background: #f8fafc !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="pure-light"] .card,
[data-theme="pure-light"] .service-card,
[data-theme="pure-light"] .ad-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

[data-theme="pure-light"] .header,
[data-theme="pure-light"] .navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="pure-light"] .sidebar {
    background: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
}

[data-theme="pure-light"] .form-control,
[data-theme="pure-light"] input,
[data-theme="pure-light"] textarea,
[data-theme="pure-light"] select {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

[data-theme="pure-light"] .form-control:focus,
[data-theme="pure-light"] input:focus,
[data-theme="pure-light"] textarea:focus,
[data-theme="pure-light"] select:focus {
    border-color: #cbd5e1 !important;
    box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.3) !important;
}

/* Pure Light Theme Background Overrides */
[data-theme="pure-light"] body {
    background: #ffffff !important;
    color: #1e293b !important;
}

[data-theme="pure-light"] .main-container {
    background: #f8fafc !important;
}

[data-theme="pure-light"] .content-area {
    background: #ffffff !important;
}

/* Pure Light Theme Text Overrides */
[data-theme="pure-light"] h1,
[data-theme="pure-light"] h2,
[data-theme="pure-light"] h3,
[data-theme="pure-light"] h4,
[data-theme="pure-light"] h5,
[data-theme="pure-light"] h6 {
    color: #1e293b !important;
}

[data-theme="pure-light"] p,
[data-theme="pure-light"] span,
[data-theme="pure-light"] div {
    color: #374151 !important;
}

/* Pure Light Theme Link Overrides */
[data-theme="pure-light"] a {
    color: #475569 !important;
}

[data-theme="pure-light"] a:hover {
    color: #1e293b !important;
}

/* Pure Light Theme Border Overrides */
[data-theme="pure-light"] .border,
[data-theme="pure-light"] .border-top,
[data-theme="pure-light"] .border-bottom,
[data-theme="pure-light"] .border-left,
[data-theme="pure-light"] .border-right {
    border-color: #e2e8f0 !important;
}

/* Pure Light Theme Shadow Overrides */
[data-theme="pure-light"] .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

[data-theme="pure-light"] .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="pure-light"] .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Force pure-light theme application */
body[data-theme="pure-light"] * {
    color-scheme: light !important;
}

/* Pure Light Theme Priority */
[data-theme="pure-light"] {
    color-scheme: light !important;
}

/* Ensure pure-light theme is always applied */
:root[data-theme="pure-light"],
html[data-theme="pure-light"] {
    color-scheme: light !important;
}

.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid;
}

.alert-success {
    background: var(--success-lighter);
    color: var(--success-dark);
    border-left-color: var(--success-color);
}

.alert-warning {
    background: var(--warning-lighter);
    color: var(--warning-dark);
    border-left-color: var(--warning-color);
}

.alert-danger {
    background: var(--danger-lighter);
    color: var(--danger-dark);
    border-left-color: var(--danger-color);
}

.alert-info {
    background: var(--primary-lighter);
    color: var(--primary-dark);
    border-left-color: var(--primary-color);
}

/* Navigation Styles */
.navbar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.navbar-brand {
    color: var(--primary-color);
    font-weight: 700;
    font-size: var(--font-size-xl);
}

.nav-link {
    color: var(--text-secondary);
    transition: var(--transition-normal);
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link.active {
    color: var(--primary-color);
    font-weight: 600;
}

/* Footer Styles */
.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-2xl) 0;
    margin-top: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 1.25rem;
        --spacing-xl: 1.75rem;
        --spacing-2xl: 2.5rem;
        
        --font-size-2xl: 1.375rem;
        --font-size-3xl: 1.625rem;
        --font-size-4xl: 2rem;
    }
}

/* Print Styles */
@media print {
    :root {
        --bg-primary: #ffffff;
        --text-primary: #000000;
        --border-color: #000000;
    }
    
    .btn, .card {
        box-shadow: none;
        border: 1px solid #000000;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.slide-up {
    animation: slideUp 0.3s ease-out;
}

.scale-in {
    animation: scaleIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from { 
        opacity: 0;
        transform: scale(0.9);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

/* Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Focus Indicators for Accessibility */
*:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Skip to Content Link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}