/* DayCarp - Modular CSS Architecture */
/* Import order is important for cascade and specificity */

/* Base Styles */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/typography.css');

/* Layout */
@import url('./layout/containers.css');
@import url('./layout/header.css');
@import url('./layout/navigation.css');

/* Components */
@import url('./components/buttons.css');
@import url('./components/forms.css');
@import url('./components/modals.css');
@import url('./components/loading.css');
@import url('./components/bullets.css');
@import url('./components/search.css');
@import url('./components/calendar.css');

/* Pages */
@import url('./pages/login.css');
@import url('./pages/notes.css');
@import url('./pages/tasks.css');
@import url('./pages/settings.css');

/* Features */
@import url('./features/drag-drop.css');
@import url('./features/minimap.css');
@import url('./features/slash-commands.css');
@import url('./features/import-export.css');

/* Responsive */
@import url('./responsive/mobile.css');
@import url('./responsive/tablet.css');
@import url('./responsive/desktop.css');

/* Utilities (loaded last to ensure highest specificity) */
@import url('./base/utilities.css');

/*
 * CSS Architecture Notes:
 *
 * This modular CSS architecture follows ITCSS (Inverted Triangle CSS) principles:
 * 1. Base layer: Variables, resets, typography, utilities
 * 2. Layout layer: Major structural components
 * 3. Component layer: Reusable UI components
 * 4. Page layer: Page-specific styles
 * 5. Feature layer: Advanced functionality styles
 * 6. Responsive layer: Device-specific adaptations
 *
 * Benefits:
 * - Maintainable and scalable
 * - Reduced redundancy and conflicts
 * - Clear separation of concerns
 * - Easy to debug and modify
 * - Better performance through selective loading
 */