/**
 * Vremya CSS Framework
 * Application v1.0
 * 
 * Main stylesheet that imports all CSS modules in the correct order.
 * This file should be the only CSS import in the HTML head section.
 * 
 * Architecture:
 * 1. Variables - Design tokens and CSS custom properties
 * 2. Base - Reset, typography, and foundational styles
 * 3. Layout - Grid system, containers, and structural patterns
 * 4. Components - Reusable UI components (buttons, forms, etc.)
 * 5. Navigation - Header, sidebar, and navigation patterns
 * 6. Widgets - Specialized widgets (time tracking, challenges, etc.)
 * 7. Pages - Page-specific styles and overrides
 * 
 * Performance Optimizations:
 * - Modular architecture for better caching
 * - CSS custom properties for theming
 * - Mobile-first responsive design
 * - Minimal specificity conflicts
 * - Optimized for critical rendering path
 */

/* === FOUNDATION LAYER === */
/* Load design tokens first - these define the entire design system */
@import url('./variables.css');

/* Base styles and reset - establish typography and foundational elements */
@import url('./base.css');

/* Layout system - containers, grid, and structural patterns */
@import url('./layout.css');

/* === COMPONENT LAYER === */
/* Reusable UI components - buttons, forms, alerts, etc. */
@import url('./components.css');

/* Navigation components - sidebar, header widgets, mobile nav */
@import url('./navigation.css');

/* Specialized widgets - time tracking, daily challenges, ambient sounds */
@import url('./widgets.css');

/* === PAGE LAYER === */
/* Page-specific styles and overrides */
@import url('./pages.css');

/**
 * USAGE GUIDELINES:
 * 
 * 1. HTML Structure:
 *    - Add only this single CSS file to your HTML head
 *    - Use semantic HTML elements with appropriate classes
 *    - Follow the established class naming patterns
 * 
 * 2. Class Naming Convention:
 *    - Component-based: .widget, .btn, .form-control
 *    - Modifier classes: .btn-primary, .widget-large
 *    - Utility classes: .flex, .text-center, .hidden
 * 
 * 3. Responsive Design:
 *    - Mobile-first approach (base styles are mobile)
 *    - Use established breakpoints in variables.css
 *    - Test on all device sizes
 * 
 * 4. Customization:
 *    - Modify CSS custom properties in variables.css
 *    - Add page-specific styles to pages.css
 *    - Create new component files as needed
 * 
 * 5. Performance:
 *    - Leverage browser caching with modular files
 *    - Use CSS custom properties for dynamic theming
 *    - Minimize inline styles
 *    - Optimize for critical rendering path
 */