/* Peak One Theme System - Light & Dark Mode Implementation */

/* Base theme colors from Peak One website */
:root {
    /* Peak One Brand Colors (constant across themes) */
    --peak-brand-primary: #2c5aa0;     /* Peak One blue - main brand */
    --peak-brand-secondary: #4a90b8;   /* Lighter blue accent */
    --peak-brand-accent: #1e4a72;      /* Darker blue for emphasis */
    --peak-brand-tertiary: #5fa8d3;    /* Light blue for highlights */
    --peak-brand-neutral: #6c7b7f;     /* Professional gray */
    --peak-brand-warm: #a0845c;        /* Warm accent for balance */
    
    /* Status Colors (constant) */
    --peak-success: #28a745;
    --peak-warning: #ffc107;
    --peak-error: #dc3545;
    --peak-info: #17a2b8;
    
    /* Transitions & Effects */
    --peak-transition: all 0.2s linear;
    --peak-transition-fast: all 0.15s ease-in-out;
    --peak-border-radius: 4px;
    --peak-border-radius-lg: 8px;
}

/* Light Mode Theme (Default) */
:root,
[data-theme="light"] {
    /* Background Colors */
    --peak-bg-base: #ffffff;
    --peak-bg-surface: #ffffff;
    --peak-bg-elevated: #f8f9fa;
    --peak-bg-muted: #f1f3f4;
    --peak-bg-subtle: #e9ecef;
    --peak-bg-hover: rgba(44, 90, 160, 0.08);
    --peak-bg-active: rgba(44, 90, 160, 0.12);
    --peak-bg-selected: rgba(44, 90, 160, 0.16);
    
    /* Text Colors */
    --peak-text-primary: #212529;
    --peak-text-secondary: #6c757d;
    --peak-text-muted: #adb5bd;
    --peak-text-on-primary: #ffffff;
    --peak-text-on-secondary: #ffffff;
    --peak-text-on-accent: #ffffff;
    --peak-text-inverse: #ffffff;
    
    /* Border Colors */
    --peak-border-base: #dee2e6;
    --peak-border-muted: #e9ecef;
    --peak-border-subtle: #f1f3f4;
    --peak-border-focus: var(--peak-brand-tertiary);
    
    /* Interactive Colors */
    --peak-primary: var(--peak-brand-primary);
    --peak-secondary: var(--peak-brand-secondary);
    --peak-accent: var(--peak-brand-accent);
    --peak-tertiary: var(--peak-brand-tertiary);
    --peak-neutral: var(--peak-brand-neutral);
    --peak-warm: var(--peak-brand-warm);
    
    /* Navigation Colors */
    --peak-nav-bg: linear-gradient(135deg, var(--peak-brand-primary) 0%, var(--peak-brand-accent) 100%);
    --peak-nav-text: rgba(255, 255, 255, 0.9);
    --peak-nav-text-active: #ffffff;
    --peak-nav-hover: rgba(255, 255, 255, 0.1);
    --peak-nav-active: rgba(255, 255, 255, 0.2);
    
    /* Form Colors */
    --peak-input-bg: #ffffff;
    --peak-input-border: var(--peak-border-base);
    --peak-input-focus-border: var(--peak-brand-secondary);
    --peak-input-focus-bg: rgba(95, 168, 211, 0.05);
    --peak-input-disabled-bg: var(--peak-bg-muted);
    --peak-input-disabled-text: var(--peak-text-muted);
    
    /* Button Colors */
    --peak-btn-primary-bg: var(--peak-brand-primary);
    --peak-btn-primary-text: #ffffff;
    --peak-btn-primary-hover: #1e4a72;
    --peak-btn-secondary-bg: var(--peak-brand-secondary);
    --peak-btn-secondary-text: #ffffff;
    --peak-btn-secondary-hover: #3a7a9a;
    
    /* Table Colors */
    --peak-table-header: var(--peak-bg-elevated);
    --peak-table-row-alt: rgba(248, 249, 250, 0.5);
    --peak-table-hover: var(--peak-bg-hover);
    --peak-table-selected: var(--peak-bg-selected);
    
    
    /* Component-specific */
    --peak-card-bg: var(--peak-bg-surface);
    --peak-modal-bg: var(--peak-bg-surface);
    --peak-overlay-bg: rgba(0, 0, 0, 0.3);
}

/* Dark Mode Theme */
[data-theme="dark"] {
    /* Background Colors */
    --peak-bg-base: #0f1419;
    --peak-bg-surface: #1a1f2e;
    --peak-bg-elevated: #1e2536;
    --peak-bg-muted: #2a3441;
    --peak-bg-subtle: #353f4c;
    --peak-bg-hover: rgba(74, 144, 184, 0.15);
    --peak-bg-active: rgba(74, 144, 184, 0.2);
    --peak-bg-selected: rgba(74, 144, 184, 0.25);
    
    /* Text Colors */
    --peak-text-primary: #e2e8f0;
    --peak-text-secondary: #94a3b8;
    --peak-text-muted: #64748b;
    --peak-text-on-primary: #ffffff;
    --peak-text-on-secondary: #ffffff;
    --peak-text-on-accent: #ffffff;
    --peak-text-inverse: #0f1419;
    
    /* Border Colors */
    --peak-border-base: #334155;
    --peak-border-muted: #475569;
    --peak-border-subtle: #1e293b;
    --peak-border-focus: #5fa8d3;
    
    /* Interactive Colors (adjusted for dark mode) */
    --peak-primary: #4a90b8;  /* Lighter blue for dark backgrounds */
    --peak-secondary: #5fa8d3; /* Light blue accent */
    --peak-accent: #3b82c7;   /* Medium blue for emphasis */
    --peak-tertiary: #7dd3fc; /* Very light blue for highlights */
    --peak-neutral: #8fa8b2;  /* Light gray-blue */
    --peak-warm: #d4a574;     /* Light warm accent */
    
    /* Navigation Colors */
    --peak-nav-bg: linear-gradient(135deg, #1e2536 0%, #0f1419 100%);
    --peak-nav-text: rgba(226, 232, 240, 0.9);
    --peak-nav-text-active: #ffffff;
    --peak-nav-hover: rgba(255, 255, 255, 0.08);
    --peak-nav-active: rgba(255, 255, 255, 0.15);
    
    /* Form Colors */
    --peak-input-bg: var(--peak-bg-elevated);
    --peak-input-border: var(--peak-border-base);
    --peak-input-focus-border: var(--peak-brand-tertiary);
    --peak-input-focus-bg: rgba(95, 168, 211, 0.1);
    --peak-input-disabled-bg: var(--peak-bg-subtle);
    --peak-input-disabled-text: var(--peak-text-muted);
    
    /* Button Colors */
    --peak-btn-primary-bg: var(--peak-primary);
    --peak-btn-primary-text: #ffffff;
    --peak-btn-primary-hover: #3a7a9a;
    --peak-btn-secondary-bg: var(--peak-secondary);
    --peak-btn-secondary-text: #ffffff;
    --peak-btn-secondary-hover: #4f98c3;
    
    /* Table Colors */
    --peak-table-header: var(--peak-bg-elevated);
    --peak-table-row-alt: rgba(30, 37, 54, 0.5);
    --peak-table-hover: var(--peak-bg-hover);
    --peak-table-selected: var(--peak-bg-selected);
    
    
    /* Component-specific */
    --peak-card-bg: var(--peak-bg-surface);
    --peak-modal-bg: var(--peak-bg-elevated);
    --peak-overlay-bg: rgba(0, 0, 0, 0.5);
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Apply dark theme colors when system prefers dark and no explicit theme is set */
        --peak-bg-base: #0f1419;
        --peak-bg-surface: #1a1f2e;
        --peak-bg-elevated: #1e2536;
        --peak-bg-muted: #2a3441;
        --peak-bg-subtle: #353f4c;
        --peak-bg-hover: rgba(74, 144, 184, 0.15);
        --peak-bg-active: rgba(74, 144, 184, 0.2);
        --peak-bg-selected: rgba(74, 144, 184, 0.25);
        
        --peak-text-primary: #e2e8f0;
        --peak-text-secondary: #94a3b8;
        --peak-text-muted: #64748b;
        
        --peak-border-base: #334155;
        --peak-border-muted: #475569;
        --peak-border-subtle: #1e293b;
        --peak-border-focus: #5fa8d3;
        
        --peak-primary: #4a90b8;
        --peak-secondary: #5fa8d3;
        --peak-accent: #3b82c7;
        
        --peak-nav-bg: linear-gradient(135deg, #1e2536 0%, #0f1419 100%);
        --peak-nav-text: rgba(226, 232, 240, 0.9);
        --peak-nav-hover: rgba(255, 255, 255, 0.08);
        --peak-nav-active: rgba(255, 255, 255, 0.15);
        
        --peak-input-bg: #1e2536;
        --peak-btn-secondary-bg: #5fa8d3;
        --peak-table-header: #1e2536;
        --peak-card-bg: #1a1f2e;
        --peak-modal-bg: #1e2536;
    }
}

/* Utility Classes */
.peak-theme-light {
    color-scheme: light;
}

.peak-theme-dark {
    color-scheme: dark;
}

/* Color Utilities */
.peak-primary { color: var(--peak-primary) !important; }
.peak-secondary { color: var(--peak-secondary) !important; }
.peak-accent { color: var(--peak-accent) !important; }
.peak-tertiary { color: var(--peak-tertiary) !important; }
.peak-neutral { color: var(--peak-neutral) !important; }
.peak-warm { color: var(--peak-warm) !important; }
.peak-text-primary { color: var(--peak-text-primary) !important; }
.peak-text-secondary { color: var(--peak-text-secondary) !important; }
.peak-text-muted { color: var(--peak-text-muted) !important; }

.peak-bg-base { background-color: var(--peak-bg-base) !important; }
.peak-bg-surface { background-color: var(--peak-bg-surface) !important; }
.peak-bg-elevated { background-color: var(--peak-bg-elevated) !important; }
.peak-bg-primary { background-color: var(--peak-primary) !important; color: var(--peak-text-on-primary) !important; }
.peak-bg-secondary { background-color: var(--peak-secondary) !important; color: var(--peak-text-on-secondary) !important; }
.peak-bg-accent { background-color: var(--peak-accent) !important; color: var(--peak-text-on-accent) !important; }
.peak-bg-tertiary { background-color: var(--peak-tertiary) !important; color: var(--peak-text-on-primary) !important; }
.peak-bg-neutral { background-color: var(--peak-neutral) !important; color: var(--peak-text-on-primary) !important; }
.peak-bg-warm { background-color: var(--peak-warm) !important; color: var(--peak-text-on-primary) !important; }

.peak-border { border-color: var(--peak-border-base) !important; }
.peak-border-muted { border-color: var(--peak-border-muted) !important; }
.peak-border-focus { border-color: var(--peak-border-focus) !important; }

/* Animation for smooth theme transitions */
*, *::before, *::after {
    transition: background-color var(--peak-transition-fast), 
                border-color var(--peak-transition-fast), 
                color var(--peak-transition-fast);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}