/*
 * Welesa Landing - Main CSS File
 *
 * This file imports all CSS components in the correct order
 * following the LLM-friendly CSS architecture.
 *
 * Import order is crucial for proper cascade and specificity.
 * Each layer builds upon the previous ones without conflicts.
 *
 * Architecture:
 * 1. Settings - CSS custom properties and configuration
 * 2. Base - Reset, base elements, fundamental styles
 * 3. Layout - Grid systems, containers, positioning
 * 4. Components - Reusable UI components
 * 5. Pages - Page-specific styles
 * 6. Utilities - Helper classes and overrides
 */

/* ==================================================
   1. SETTINGS LAYER - CSS Custom Properties
   ================================================== */

/* CSS variables, configuration, design tokens */
@import url('./settings/css-custom-properties.css');

/* ==================================================
   2. BASE LAYER - Fundamental Styles
   ================================================== */

/* CSS reset, base element styles, typography foundations */
@import url('./base/reset-and-base.css');

/* ==================================================
   3. LAYOUT LAYER - Structure and Positioning
   ================================================== */

/* Main container with grid background and gradients */
@import url('./layout/main-container.css');

/* ==================================================
   4. COMPONENTS LAYER - Reusable UI Elements
   ================================================== */

/* Header and navigation */
@import url('./components/header-navigation.css');

/* Background effects and decorations */
@import url('./components/background-effects.css');

/* Sophisticated background effects for about page */
@import url('./components/sophisticated-background.css');

/* Citation and tooltip system */
@import url('./components/citations-tooltips.css');

/* About page specific sections */
@import url('./components/about-page-sections.css');

/* Sources section and progress indicator */
@import url('./components/sources-progress.css');

/* Hero section with responsive typography */
@import url('./components/hero-section.css');

/* Modal dialogs and overlays */
@import url('./components/modal-dialog.css');

/* Custom scrollbars for consistent styling */
@import url('./components/custom-scrollbars.css');

/* Specification page sidebar navigation */
@import url('./components/spec-sidebar-navigation.css');

/* Specification page navigation icons */
@import url('./components/spec-navigation-icons.css');

/* Chatbot overlay and functionality */
@import url('./components/chatbot-overlay-main.css');
@import url('./components/chatbot-messages.css');
@import url('./components/chatbot-input.css');

/* Specification page hero section */
@import url('./components/spec-hero-section.css');

/* Specification page problem section */
@import url('./components/spec-problem-section.css');

/* Specification page market section */
@import url('./components/spec-market-section.css');

/* Specification page customer section */
@import url('./components/spec-customer-section.css');

/* Specification page jobs section */
@import url('./components/spec-jobs-groups.css');
@import url('./components/spec-jobs-cards.css');
@import url('./components/spec-jobs-content.css');

/* Specification page vision section */
@import url('./components/spec-vision-section.css');

/* Specification page competition section */
@import url('./components/spec-competition-section.css');

/* Specification page current solutions section */
@import url('./components/spec-current-solutions.css');

/* Specification page mission section */
@import url('./components/spec-mission-section.css');

/* Specification page value proposition section */
@import url('./components/spec-value-proposition-section.css');

/* Premium typography with advanced animations */
@import url('./components/premium-typography.css');

/* How It Works section with tools integration */
@import url('./components/how-it-works-section.css');

/* Use Cases section with interactive slider */
@import url('./components/use-cases-section-main.css');
@import url('./components/use-cases-slider.css');
@import url('./components/use-cases-icons.css');
@import url('./components/use-cases-cards.css');

/* Footer with legal links */
@import url('./components/footer.css');

/* ==================================================
   5. PAGES LAYER - Page-Specific Styles
   ================================================== */

/* Index page specific styles for landing page */
@import url('./pages/index-page.css');

/* About/Specification page specific styles */
@import url('./pages/about-page.css');

/* Roadmap page specific styles */
@import url('./pages/roadmap-page.css');

/* ==================================================
   6. UTILITIES LAYER - Helper Classes
   ================================================== */

/* Responsive design utilities and breakpoint helpers */
@import url('./utilities/responsive-helpers.css');

/* Animation and transition utilities */
@import url('./utilities/animation-helpers.css');

/*
 * MIGRATION STATUS:
 * ✅ Created new folder structure
 * ✅ Extracted CSS custom properties
 * ✅ Created base reset and element styles
 * ✅ Extracted components from aqua-layout.css
 * ✅ Extracted components from spec.css
 * ✅ Created specification page components
 * ✅ Eliminated all !important declarations
 * ✅ Created Pages Layer with page-specific styles
 * ✅ Created Utilities Layer with helpers
 * ✅ Extracted How It Works Section component
 * ✅ Migrated all HTML files to main.css only
 * ✅ Completed final cleanup of monolithic files
 * ✅ Extracted value proposition to spec-value-proposition-section.css
 *
 * REFACTORING COMPLETED! 🎉
 * The CSS architecture is now fully modular and LLM-friendly.
 */