/* ============================================================================
   CSS Architecture - Main Entry Point
   ============================================================================
   
   This file imports all CSS layers in the correct cascade order:
   1. Global - Foundation styles (variables, resets, typography, base elements)
   2. Layout - Page structure and layout patterns
   3. Components - Reusable UI components (BEM naming)
   4. Utilities - Single-purpose utility classes
   5. Pages - Page-specific styles
   
   Import order is critical for proper cascade and specificity management.
   ============================================================================ */

/* ============================================================================
   Layer 1: Global Styles
   ============================================================================
   Foundation styles that apply site-wide: CSS custom properties, resets,
   typography, base element styles, and accessibility utilities.
   ============================================================================ */

@import "global/_variables.css";
@import "global/_reset.css";
@import "global/_typography.css";
@import "global/_base.css";
@import "global/_accessibility.css";

/* ============================================================================
   Layer 2: Layout Styles
   ============================================================================
   Page structure and layout patterns: containers, grids, responsive
   breakpoints, and structural components (header, footer, main).
   ============================================================================ */

@import "layout/_header.css";
@import "layout/_footer.css";
@import "layout/_main.css";
@import "layout/_containers.css";
@import "layout/_grid.css";

/* ============================================================================
   Layer 3: Component Styles
   ============================================================================
   Reusable UI components using BEM naming convention: cards, buttons,
   navigation, forms, hero sections, section frames, and footer components.
   ============================================================================ */

@import "components/_cards.css";
@import "components/_buttons.css";
@import "components/_chips.css";
@import "components/_navigation.css";
@import "components/_forms.css";
@import "components/_hero.css";
@import "components/_section-frames.css";
@import "components/_contact-cards.css";
@import "components/_footer-components.css";
@import "components/_cookie-banner.css";
@import "components/_postlist.css";
@import "components/_service-cards.css";

/* ============================================================================
   Layer 4: Utility Styles
   ============================================================================
   Single-purpose utility classes for spacing, sizing, colors, display,
   typography, and visual effects.
   ============================================================================ */

@import "utilities/_spacing.css";
@import "utilities/_sizing.css";
@import "utilities/_colors.css";
@import "utilities/_display.css";
@import "utilities/_typography-utils.css";
@import "utilities/_effects.css";

/* ============================================================================
   Layer 5: Page-Specific Styles
   ============================================================================
   Styles unique to specific pages or sections. These should be minimal
   and only contain page-specific overrides or unique layouts.
   ============================================================================ */

@import "pages/_home.css";
@import "pages/_contact.css";
@import "pages/_news.css";
@import "pages/_docs.css";
@import "pages/_legal.css";
@import "pages/_bangladesh.css";
@import "pages/_flipbook.css";
@import "pages/_membership.css";
@import "pages/_verify-widget.css";
@import "pages/_content.css";
@import "pages/_learn.css";
@import "pages/_access-doc.css";
@import "pages/_faq.css";
@import "pages/_services.css";
@import "pages/_industry.css";