/* ==========================================================================
   MAIN STYLESHEET - HVMB LANDING PAGE
   Optimized loading order for performance
   ========================================================================== */

/* ==========================================================================
   1. DESIGN SYSTEM FOUNDATION
   Critical styles that define the design tokens and variables
   ========================================================================== */
@import url('./variables.css');

/* ==========================================================================
   2. RESET & BASE STYLES
   Browser normalization and foundational styles
   ========================================================================== */
@import url('./reset.css');

/* ==========================================================================
   3. TYPOGRAPHY SYSTEM
   Font declarations and text utilities
   ========================================================================== */
@import url('./typography.css');

/* ==========================================================================
   4. UTILITY CLASSES
   Reusable utility classes for layout, spacing, and common patterns
   ========================================================================== */
@import url('./utilities.css');

/* ==========================================================================
   5. COMPONENT STYLES
   Individual component styles in order of appearance in HTML
   ========================================================================== */

/* Header (appears first) */
@import url('./components/header.css');

/* Hero section (above the fold) */
@import url('./components/hero.css');

/* Button components (used throughout) */
@import url('./components/buttons.css');

/* Content sections */
@import url('./components/sections.css');

/* FAQ component */
@import url('./components/faq.css');

/* Footer (appears last) */
@import url('./components/footer.css');

/* ==========================================================================
   6. RESPONSIVE STYLES
   Consolidated media queries and responsive behavior
   ========================================================================== */
@import url('./responsive.css');

/* ==========================================================================
   CRITICAL CSS INLINE CANDIDATE
   
   The following styles should be considered for inlining in the HTML head
   to prevent FOUC (Flash of Unstyled Content):
   
   - CSS Custom Properties (variables.css)
   - Reset styles (reset.css)
   - Above-the-fold styles (header.css, hero.css)
   - Typography for main heading (portions of typography.css)
   ========================================================================== */