/* Critical CSS - Layout inline styles */

/* Font fallback stack for CLS prevention */
:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Critical CSS - Above the fold content */
:root {
    --bs-blue: #0d6efd;
    --bs-primary: #2757fd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}

/* Font loading optimization */
body { 
    font-family: var(--font-primary); 
    font-display: swap;
}

/* Critical layout containers */
.container, .container-fluid { 
    max-width: 100%; 
}

/* Header/Navigation skeleton */
header { 
    min-height: 60px; 
}

/* Responsive images */
img { 
    max-width: 100%; 
    height: auto; 
    font-display: swap;
}

/* Basic responsive utilities */
.media-sm-only { display: block; }
.media-md-up { display: none; }
.media-lg-up { display: none; }
.media-xl-up { display: none; }

/* Font loading states */
.font-loading {
    visibility: hidden;
}

.font-loaded .font-loading {
    visibility: visible;
}

/* Responsive breakpoints */
@media (min-width: 768px) {
    .media-sm-only { display: none; }
    .media-md-up { display: block; }
}

@media (min-width: 992px) {
    .media-lg-up { display: block; }
}

@media (min-width: 1200px) {
    .media-xl-up { display: block; }
}