/**
 * Global CSS Variables
 * Consistent colors and design tokens across the entire application
 */

:root {
    /* Primary Colors - Baby Blue Theme */
    --primary-color: #87CEEB;      /* Baby Blue - Main brand color */
    --secondary-color: #4682B4;    /* Steel Blue - For navbar and accents */
    
    /* Status Colors */
    --success-color: #28a745;      /* Green for success states */
    --warning-color: #ffc107;      /* Yellow for warnings */
    --danger-color: #dc3545;       /* Red for errors */
    --info-color: #17a2b8;         /* Cyan for information */
    
    /* Neutral Colors */
    --text-dark: #2c3e50;          /* Dark text */
    --text-muted: #6c757d;         /* Muted text */
    --border-color: #e9ecef;       /* Light borders */
    --background-light: #f8f9fa;   /* Light background */
    
    /* Component Colors */
    --navbar-bg: var(--secondary-color);
    --card-bg: #ffffff;
    --button-primary-bg: var(--primary-color);
    --button-primary-color: #000000;
    
    /* Spacing */
    --border-radius: 8px;
    --box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Global Navbar Styling */
.navbar {
    background-color: var(--navbar-bg) !important;
}

/* Logo Styles */
.navbar-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    background: transparent;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}


/* Responsive logo adjustments */
@media (max-width: 768px) {
    .navbar-logo {
        height: 32px;
    }
}

@media (max-width: 576px) {
    .navbar-logo {
        height: 28px;
    }
}

/* Global Mobile Responsive Styles */
@media (max-width: 768px) {
    /* Typography */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    
    /* Buttons */
    .btn {
        font-size: 0.9rem;
        padding: 0.7rem 1.2rem;
    }
    
    .btn-lg {
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
    }
    
    .btn-sm {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    /* Cards and containers */
    .card {
        margin-bottom: 1rem;
        border-radius: 10px;
    }
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Tables */
    .table-responsive {
        font-size: 0.9rem;
    }
    
    /* Forms */
    .form-control {
        font-size: 1rem;
        padding: 0.8rem;
    }
    
    /* Navigation */
    .navbar-collapse {
        text-align: center;
        margin-top: 1rem;
    }
}

@media (max-width: 576px) {
    /* Typography */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.9rem; }
    
    /* Buttons */
    .btn {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }
    
    .btn-lg {
        font-size: 0.9rem;
        padding: 0.7rem 1.2rem;
    }
    
    .btn-sm {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    
    /* Containers */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Tables */
    .table-responsive {
        font-size: 0.8rem;
    }
    
    /* Forms */
    .form-control {
        font-size: 0.9rem;
        padding: 0.7rem;
    }
    
    /* Navigation */
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Spacing utilities */
    .p-3 { padding: 1rem !important; }
    .p-4 { padding: 1.5rem !important; }
    .m-3 { margin: 1rem !important; }
    .m-4 { margin: 1.5rem !important; }
}

/* Global Button Styling */
.btn-primary {
    background-color: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
    color: var(--button-primary-color);
}

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

.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--secondary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #000;
}