/* ============================================================================
   MAIN CSS - ITCSS + BEM ARCHITECTURE
   ============================================================================
   
   This file imports all CSS in the correct ITCSS order:
   1. Settings   - Variables, design tokens
   2. Generic    - Reset, normalize
   3. Elements   - Base HTML elements
   4. Objects    - Layout patterns
   5. Components - UI components
   6. Utilities  - Helper classes
   
   Import order matters! Do not rearrange.
   
   ============================================================================ */

/* ============================================================================
   1. SETTINGS - Variables and Design Tokens
   ============================================================================ */
@import './1-settings/variables.css';

/* ============================================================================
   2. GENERIC - Reset and Normalize
   ============================================================================ */
@import './2-generic/normalize.css';

/* ============================================================================
   3. ELEMENTS - Base HTML Element Styling
   ============================================================================ */
@import './3-elements/typography.css';
@import './3-elements/forms.css';

/* ============================================================================
   4. OBJECTS - Layout Patterns (Unstyled)
   ============================================================================ */
@import './4-objects/layout.css';

/* ============================================================================
   5. COMPONENTS - UI Components (BEM naming)
   ============================================================================ */

/* Core Components */
@import './5-components/c-button.css';
@import './5-components/c-data-table.css';
@import './5-components/c-modal.css';
@import './5-components/c-form.css';
@import './5-components/c-badge.css';
@import './5-components/c-pagination.css';

/* Page-Specific Components */
@import './5-components/c-lead-card.css';
@import './5-components/c-filter-bar.css';
@import './5-components/c-listings-table.css';
@import './5-components/c-advanced-filters.css';

/* Email Dashboard Components */
@import './5-components/c-email-dashboard-single.css';
@import './5-components/c-email-tabs.css';
@import './5-components/c-email-stats.css';
@import './5-components/c-email-logs.css';
@import './5-components/c-email-alerts.css';

/* ============================================================================
   7. UTILITIES - Helper Classes (Override Everything)
   ============================================================================ */
@import './7-utilities/utilities.css';

/* ============================================================================
   LEGACY SUPPORT - Backward Compatibility
   ============================================================================

   These rules duplicate new BEM component styles for old class names.
   This allows HTML to work without changes during migration.

   NOTE: This creates some CSS duplication, but ensures zero breaking changes.
   TODO: Remove after HTML is updated to use BEM classes directly.

   ============================================================================ */

/* Legacy support is handled by keeping old styles in styles.css for now.
   New components will use BEM classes.
   Gradual migration strategy:
   1. New features use BEM classes
   2. Existing features keep old classes (still work)
   3. Eventually update HTML to BEM
   4. Remove old styles from styles.css
*/