/* ============================================================================
   PCS - CSS VARIABLES SYSTEM
   Modern Professional Theme - Easy Theme Switching
   ============================================================================ */

/* ============================================================================
   ROOT - DEFAULT THEME (Light Mode)
   ============================================================================ */

:root {
    /* ========================================
       COLOR PALETTE - Professional Blue Base
       ======================================== */
    
    /* Primary Colors */
    --pcs-primary: #3b82f6;
    --pcs-primary-hover: #2563eb;
    --pcs-primary-light: #dbeafe;
    --pcs-primary-dark: #1e40af;
    
    /* Surfaces - Cool Blue-Gray Professional */
    --pcs-surface: #f8fafc;
    --pcs-surface-elevated: #ffffff;
    --pcs-surface-secondary: #f1f5f9;
    --pcs-surface-tertiary: #f1f5f9;
    --pcs-background: #f1f5f9;
    
    /* Text Colors - High contrast for readability */
    --pcs-text-primary: #1e293b;
    --pcs-text-secondary: #64748b;
    --pcs-text-tertiary: #94a3b8;
    --pcs-text-inverse: #ffffff;
    
    /* Borders - Subtle */
    --pcs-border: #e2e8f0;
    --pcs-border-light: #f1f5f9;
    --pcs-border-dark: #cbd5e1;
    
    /* Status Colors - Semantic (remain constant across themes) */
    --pcs-status-normal: #10b981;
    --pcs-status-normal-light: #d1fae5;
    --pcs-status-normal-dark: #065f46;
    
    --pcs-status-inspection: #f59e0b;
    --pcs-status-inspection-light: #fef3c7;
    --pcs-status-inspection-dark: #92400e;
    
    --pcs-status-failure: #ef4444;
    --pcs-status-failure-light: #fee2e2;
    --pcs-status-failure-dark: #991b1b;
    
    --pcs-status-offline: #6b7280;
    --pcs-status-offline-light: #f3f4f6;
    --pcs-status-offline-dark: #374151;
    
    /* Semantic Colors */
    --pcs-success: #10b981;
    --pcs-warning: #f59e0b;
    --pcs-error: #ef4444;
    --pcs-info: #3b82f6;
    
    /* ========================================
       ELEVATION - Subtle, professional shadows
       ======================================== */
    
    --pcs-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --pcs-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --pcs-shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
    --pcs-shadow-lg: 0 12px 24px 0 rgba(0, 0, 0, 0.10);
    --pcs-shadow-xl: 0 20px 40px 0 rgba(0, 0, 0, 0.12);
    --pcs-shadow-2xl: 0 25px 50px 0 rgba(0, 0, 0, 0.15);
    
    /* ========================================
       BORDER RADIUS - Modern, not excessive
       ======================================== */
    
    --pcs-radius-xs: 4px;
    --pcs-radius-sm: 8px;
    --pcs-radius-md: 12px;
    --pcs-radius-lg: 16px;
    --pcs-radius-xl: 20px;
    --pcs-radius-2xl: 24px;
    --pcs-radius-full: 9999px;
    
    /* ========================================
       SPACING - Generous white space
       ======================================== */
    
    --pcs-space-xs: 4px;
    --pcs-space-sm: 8px;
    --pcs-space-md: 16px;
    --pcs-space-lg: 24px;
    --pcs-space-xl: 32px;
    --pcs-space-2xl: 48px;
    --pcs-space-3xl: 64px;
    
    /* ========================================
       TYPOGRAPHY - Clean, readable
       ======================================== */
    
    --pcs-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
    --pcs-font-family-mono: 'Cascadia Code', 'Consolas', 'Monaco', monospace;
    
    /* Font Sizes */
    --pcs-font-xs: 12px;
    --pcs-font-sm: 13px;
    --pcs-font-base: 15px;
    --pcs-font-lg: 17px;
    --pcs-font-xl: 20px;
    --pcs-font-2xl: 24px;
    --pcs-font-3xl: 30px;
    --pcs-font-4xl: 36px;
    
    /* Font Weights */
    --pcs-weight-normal: 400;
    --pcs-weight-medium: 500;
    --pcs-weight-semibold: 600;
    --pcs-weight-bold: 700;
    
    /* Line Heights */
    --pcs-leading-tight: 1.25;
    --pcs-leading-normal: 1.5;
    --pcs-leading-relaxed: 1.6;
    --pcs-leading-loose: 1.8;
    
    /* Letter Spacing */
    --pcs-tracking-tight: -0.02em;
    --pcs-tracking-normal: 0;
    --pcs-tracking-wide: 0.05em;
    
    /* ========================================
       TRANSITIONS - Smooth, not too slow
       ======================================== */
    
    --pcs-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --pcs-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --pcs-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    
    --pcs-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --pcs-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
    --pcs-easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
    
    /* ========================================
       GLASSMORPHISM - For navbar/sidebar only
       ======================================== */
    
    --pcs-glass-bg: rgba(241, 245, 249, 0.75); /* Softer, less bright - matches --pcs-background */
    --pcs-glass-border: rgba(148, 163, 184, 0.3); /* Subtle slate border */
    --pcs-glass-blur: blur(16px);
    
    /* ========================================
       LAYOUT - Fixed dimensions
       ======================================== */
    
    --pcs-navbar-height: 64px;
    --pcs-sidebar-width: 280px;
    --pcs-sidebar-mini-width: 64px;
    
    /* ========================================
       Z-INDEX - Layering
       ======================================== */
    
    --pcs-z-dropdown: 1000;
    --pcs-z-sticky: 1020;
    --pcs-z-fixed: 1030;
    --pcs-z-modal-backdrop: 1040;
    --pcs-z-modal: 1050;
    --pcs-z-popover: 1060;
    --pcs-z-tooltip: 1070;
}

/* ============================================================================
   DARK MODE - [data-bs-theme="dark"]
   ============================================================================ */

[data-bs-theme="dark"] {
    /* Colors */
    --pcs-primary: #60a5fa;
    --pcs-primary-hover: #3b82f6;
    --pcs-primary-light: #1e3a5f;
    --pcs-primary-dark: #93c5fd;
    
    /* Surfaces - Slate Black Professional */
    --pcs-surface: #1a1a1a;
    --pcs-surface-elevated: #2a2a2a;
    --pcs-surface-secondary: #141414;
    --pcs-surface-tertiary: #222222;
    --pcs-background: #0a0a0a;
    
    /* Text Colors */
    --pcs-text-primary: #f1f5f9;
    --pcs-text-secondary: #cbd5e1;
    --pcs-text-tertiary: #94a3b8;
    --pcs-text-inverse: #0a0a0a;
    
    /* Borders */
    --pcs-border: #2f2f2f;
    --pcs-border-light: #1f1f1f;
    --pcs-border-dark: #404040;
    
    /* Status Colors - slightly brighter for dark bg */
    --pcs-status-normal: #34d399;
    --pcs-status-normal-light: #064e3b;
    --pcs-status-normal-dark: #6ee7b7;
    
    --pcs-status-inspection: #fbbf24;
    --pcs-status-inspection-light: #78350f;
    --pcs-status-inspection-dark: #fcd34d;
    
    --pcs-status-failure: #f87171;
    --pcs-status-failure-light: #7f1d1d;
    --pcs-status-failure-dark: #fca5a5;
    
    --pcs-status-offline: #9ca3af;
    --pcs-status-offline-light: #1f2937;
    --pcs-status-offline-dark: #d1d5db;
    
    /* Semantic Colors */
    --pcs-success: #34d399;
    --pcs-warning: #fbbf24;
    --pcs-error: #f87171;
    --pcs-info: #60a5fa;
    
    /* Elevation - Deeper shadows for dark mode */
    --pcs-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --pcs-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    --pcs-shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
    --pcs-shadow-lg: 0 12px 24px 0 rgba(0, 0, 0, 0.6);
    --pcs-shadow-xl: 0 20px 40px 0 rgba(0, 0, 0, 0.7);
    --pcs-shadow-2xl: 0 25px 50px 0 rgba(0, 0, 0, 0.8);
    
    /* Glassmorphism - Slate Black glass */
    --pcs-glass-bg: rgba(26, 26, 26, 0.85);
    --pcs-glass-border: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   BOOTSTRAP VARIABLES COMPATIBILITY
   Map PCS variables to Bootstrap naming for backward compatibility
   ============================================================================ */

:root {
    /* Primary color mapping */
    --bs-primary: var(--pcs-primary);
    --bs-primary-rgb: 59, 130, 246; /* Match #3b82f6 */
    
    /* Surface mapping */
    --bs-body-bg: var(--pcs-background);
    --bs-body-color: var(--pcs-text-primary);
    --bs-secondary-bg: var(--pcs-surface-secondary);
    --bs-tertiary-bg: var(--pcs-surface-tertiary);
    --bs-secondary-color: var(--pcs-text-secondary);
    
    /* Border mapping */
    --bs-border-color: var(--pcs-border);
    
    /* Status colors mapping */
    --bs-success: var(--pcs-status-normal);
    --bs-warning: var(--pcs-status-inspection);
    --bs-danger: var(--pcs-status-failure);
    --bs-info: var(--pcs-info);
}

[data-bs-theme="dark"] {
    /* Primary color mapping for dark mode */
    --bs-primary: var(--pcs-primary);
    --bs-primary-rgb: 96, 165, 250; /* Match #60a5fa */
}

/* ============================================================================
   GLOBAL STYLES
   ============================================================================ */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--pcs-font-family);
    font-size: var(--pcs-font-base);
    line-height: var(--pcs-leading-relaxed);
    color: var(--pcs-text-primary);
    background: linear-gradient(180deg, var(--pcs-background) 0%, var(--pcs-surface-secondary) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle radial gradient background overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(900px 420px at 12% -10%, rgba(96, 165, 250, 0.06), transparent 60%),
        radial-gradient(900px 420px at 88% 0%, rgba(96, 165, 250, 0.04), transparent 60%);
    pointer-events: none;
    z-index: -1;
}

[data-bs-theme="dark"] body::before {
    background: 
        radial-gradient(900px 420px at 12% -10%, rgba(96, 165, 250, 0.12), transparent 60%),
        radial-gradient(900px 420px at 88% 0%, rgba(96, 165, 250, 0.08), transparent 60%);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection */
::selection {
    background: var(--pcs-primary-light);
    color: var(--pcs-primary-dark);
}

[data-bs-theme="dark"] ::selection {
    background: var(--pcs-primary-dark);
    color: var(--pcs-primary-light);
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--pcs-primary);
    outline-offset: 2px;
}