/* ==========================================================================
   CSS Variables - Design System
   ========================================================================== */

:root {
    /* Color Palette */
    --color-primary: #007bff;
    --color-primary-dark: #0056b3;
    --color-primary-light: #e0eafc;
    
    --color-secondary: #6c757d;
    --color-secondary-dark: #545b62;
    --color-secondary-light: #e9ecef;
    
    --color-success: #28a745;
    --color-success-dark: #218838;
    --color-success-light: #d4edda;
    
    --color-danger: #dc3545;
    --color-danger-dark: #c82333;
    --color-danger-light: #f8d7da;
    
    --color-warning: #ffc107;
    --color-warning-dark: #d39e00;
    --color-warning-light: #fff3cd;
    
    --color-info: #17a2b8;
    --color-info-dark: #117a8b;
    --color-info-light: #d1ecf1;
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    
    /* Background Colors */
    --bg-body: #ffffff;
    --bg-light: #f8f9fa;
    --bg-dark: #212529;
    --bg-navbar: #e3f2fd;
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #6c757d;
    --text-light: #f8f9fa;
    
    /* Spacing System (8px base) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* Typography */
    --font-family-base: 'Manrope', 'Segoe UI', Arial, sans-serif;
    --font-family-heading: 'Fraunces', 'Times New Roman', serif;
    --font-family-mono: 'SF Mono', 'Courier New', monospace;
    
    /* Font Sizes (responsive) */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    --font-size-4xl: 2.5rem;    /* 40px */
    --font-size-5xl: 3rem;      /* 48px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* Z-Index Scale */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    /* Breakpoints (for reference in JS) */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

/* ==========================================================================
   Accessibility - Skip Link
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-gray-900);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    z-index: var(--z-index-tooltip);
    border-radius: 0 0 var(--border-radius-sm) 0;
    font-weight: var(--font-weight-semibold);
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Dark Mode Variables (optional future implementation) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-body: #212529;
        --bg-light: #343a40;
        --text-primary: #f8f9fa;
        --text-secondary: #adb5bd;
    }
}

/* ==========================================================================
   Utility Classes Using Variables
   ========================================================================== */

/* Spacing Utilities */
.spacing-xs { height: var(--spacing-xs); }
.spacing-sm { height: var(--spacing-sm); }
.spacing-md { height: var(--spacing-md); }
.spacing-lg { height: var(--spacing-lg); }
.spacing-xl { height: var(--spacing-xl); }
.spacing-2xl { height: var(--spacing-2xl); }
.spacing-3xl { height: var(--spacing-3xl); }

/* Legacy spacing (for compatibility) */
.spacing-50 { height: 50px; }
.spacing-100 { height: 100px; }
.spacing-200 { height: 200px; }

/* Carousel background images */
.carousel-bg-1 {
    background-image: url('/img/mainWindow/5-e724fdbf8f1d38f9d48a082807215a71.jpeg');
}

.carousel-bg-2 {
    background-image: url('/img/logo-bc26cac8aea5287c998d5c4175483f77.png');
}

.carousel-bg-3 {
    background-image: url('/img/mainWindow/6-c0723f5260c51d08f65d0a84f3dfda4e.jpeg');
}

/* Common carousel item styles */
.carousel-item-custom {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Text Utilities */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

/* Background Utilities */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-light { background-color: var(--bg-light); }
.bg-dark { background-color: var(--bg-dark); }

/* Border Radius Utilities */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }