/**
 * Main Stylesheet
 * Imports modular CSS files for better organization and maintainability
 * 
 * Import Order:
 * 1. Design system (tokens, variables)
 * 2. Layout and structure (layout, grids, responsiveness)
 * 3. Navigation (navbar)
 * 4. Reusable components (buttons, cards, forms, dropdowns)
 * 5. Page-specific styles (homepage, realtime, about)
 * 6. Overlays and modals
 * 7. Data visualization (charts, maps, tables, media)
 * 8. Utilities (helpers, text, effects)
 */

/* ===== Design System ===== */
@import './css/design-tokens.css';

/* ===== Layout & Structure ===== */
@import './css/layout.css';
@import './css/media.css';

/* ===== Navigation ===== */
@import './css/navbar.css';

/* ===== Reusable Components ===== */
@import './css/components.css';
@import './css/forms.css';
@import './css/dropdown.css';
@import './css/controls.css';

/* ===== Page-Specific Styles ===== */
@import './css/homepage.css';
@import './css/realtime.css';

/* ===== Overlays & Modals ===== */
@import './css/settings-overlay.css';
@import './css/fullscreen-overlay.css';

/* ===== Data Visualization ===== */
@import './css/charts.css';
@import './css/variables-table.css';

/* ===== Global Page Transition Indicator ===== */
body.page-transitioning::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ncar-blue), var(--ncar-orange));
	transform: scaleX(1);
	transform-origin: left;
	animation: pageTransitionBar 0.6s ease-in-out infinite;
	z-index: 10000;
	pointer-events: none;
}

@keyframes pageTransitionBar {
	0% { transform: scaleX(0); }
	50% { transform: scaleX(1); }
	100% { transform: scaleX(0); }
}