/**
 * Integration Loader CSS
 * 
 * This file imports all required CSS files in the correct dependency order
 * for the UI swap integration. It serves as a single entry point for loading
 * the new UI design system alongside the legacy styles.
 * 
 * Load Order:
 * 1. Theme Tokens (foundation layer)
 *    - theme-tokens.css - CSS custom properties for light/dark themes
 * 
 * 2. Theme Components (component layer)
 *    - theme-components.css - Modern UI component styles
 * 
 * 3. Theme Pages (page layer)
 *    - theme-pages.css - Page-specific layout styles
 * 
 * 4. CSS Bridge (integration layer)
 *    - css-bridge.css - Bridges legacy classes to new UI tokens
 * 
 * Usage:
 * Add this single link tag to HTML pages:
 * <link rel="stylesheet" href="integration-loader.css" />
 * 
 * Requirements: 4.1, 4.2, 4.6
 */

/* ===========================================
   1. Theme Tokens (Foundation Layer)
   CSS custom properties for light/dark themes
   =========================================== */

@import url('assets/css/theme-tokens.css');

/* ===========================================
   2. Theme Components (Component Layer)
   Modern UI component styles
   =========================================== */

@import url('assets/css/theme-components.css');

/* ===========================================
   3. Theme Pages (Page Layer)
   Page-specific layout styles
   =========================================== */

@import url('assets/css/theme-pages.css');

/* ===========================================
   4. CSS Bridge (Integration Layer)
   Bridges legacy classes to new UI tokens
   =========================================== */

@import url('css-bridge.css');