/* ================================================
   ONLY VTC - Main CSS Entry Point
   Unified CSS architecture
   
   This file replaces the old fragmented app.css
   Import order is critical for proper cascade
   ================================================ */

/* ============================================
   LAYER 1: CORE (Foundation)
   Design tokens and base styles
   ============================================ */
@import './core/variables.css';
@import './core/reset.css';
@import './core/typography.css';

/* ============================================
   LAYER 2: LAYOUT (Structure)
   Page structure and grid systems
   ============================================ */
@import './layout/grid.css';
@import './layout/containers.css';
@import './layout/flex.css';

/* ============================================
   LAYER 3: COMPONENTS (UI Elements)
   Reusable UI components
   ============================================ */
@import './components/buttons.css';
@import './components/forms.css';
@import './components/cards.css';
@import './components/modals.css';
@import './components/tables.css';
@import './components/alerts.css';
@import './components/badges.css';
@import './components/navbar.css';
@import './components/sidebar.css';
@import './components/user-menu.css';

/* ============================================
   LAYER 4: PAGES (Page-specific)
   Styles specific to certain pages
   ============================================ */
@import './pages/home.css';
@import './pages/dashboard.css';
@import './pages/admin.css';
@import './pages/auth.css';

/* ============================================
   LAYER 5: THEMES (Dark mode, variants)
/* ============================================
   LAYER 5: THEMES (Dark mode, variants)
   Theme-specific overrides
   ============================================ */
@import './themes/dark.css';

/* ============================================
   LAYER 6: UTILITIES (Helpers)
   Utility classes for quick styling
   ============================================ */
@import './utilities/spacing.css';
@import './utilities/display.css';
@import './utilities/colors.css';

/* ============================================
   MIGRATION COMPLETE!
   
   ✅ Phase 0: Folder structure
   ✅ Phase 1: Core (variables, reset, typography)
   ✅ Phase 2: Layout (grid, containers, flex)
   ✅ Phase 3: Components (buttons, forms, cards, etc.)
   ✅ Phase 4: Pages (home, dashboard, admin, auth)
   ✅ Phase 5: Themes (dark mode)
   ✅ Phase 6: Utilities (spacing, display, colors)
   
   TODO Phase 7: Remove old duplicate CSS files
   ============================================ */