/* 
 * Lashes By Līva - Main Stylesheet
 * Modular CSS Architecture for Better Maintainability
 */

/* 1. Variables and Base Styles */
@import url('./variables.css');
@import url('./base.css');

/* 2. Component Styles */
@import url('./components/buttons.css');
@import url('./components/forms.css');
@import url('./components/cards.css');
@import url('./components/navigation.css');
@import url('./components/google-reviews.css');

/* 3. Section Styles */
@import url('./sections/header.css');
@import url('./sections/hero.css');
@import url('./sections/services.css');
@import url('./sections/portfolio.css');
@import url('./sections/reviews.css');
@import url('./sections/about.css');
@import url('./sections/contact.css');
@import url('./sections/footer.css');

/* 4. Utility Styles */
@import url('./utilities/animations.css');
@import url('./utilities/responsive.css');

/* 
 * File Structure Overview:
 * 
 * styles/
 * ├── main.css              (this file - imports all others)
 * ├── variables.css         (CSS custom properties, colors, spacing)
 * ├── base.css             (reset, typography, base elements)
 * ├── components/
 * │   ├── buttons.css      (all button styles and variants)
 * │   ├── forms.css        (form controls, validation, layout)
 * │   ├── cards.css        (service cards, review cards, portfolio)
 * │   └── navigation.css   (header nav, mobile menu, logo)
 * ├── sections/
 * │   ├── header.css       (header section specific styles)
 * │   ├── hero.css         (hero section, loading screen)
 * │   ├── services.css     (services section layout)
 * │   ├── contact.css      (contact section, info, form)
 * │   └── footer.css       (footer styles)
 * └── utilities/
 *     ├── animations.css   (keyframes, animation classes)
 *     └── responsive.css   (breakpoints, utility classes)
 * 
 * Benefits:
 * - Easy to find and edit specific components
 * - Modular and maintainable code structure
 * - Reusable components across pages
 * - Clear separation of concerns
 * - Better collaboration workflow
 */