/* ========================================
   L. Concepcion Website - Main CSS File
   Modular CSS Architecture
   ======================================== */

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

/* Layout Modules */
@import url('./layout/grid.css');
@import url('./layout/sections.css');

/* Component Modules */
@import url('./components/navigation.css');
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/forms.css');
@import url('./components/special.css');

/* Utility Modules */
@import url('./utilities/spacing.css');
@import url('./utilities/effects.css');

/* ========================================
   Documentation:
   
   This modular CSS architecture provides:
   
   1. Base Styles:
      - variables.css: CSS custom properties for colors, spacing, typography
      - reset.css: CSS reset and base element styles
      - typography.css: Typography utilities and font loading
   
   2. Layout Modules:
      - grid.css: Grid system, flexbox utilities, container classes
      - sections.css: Section layouts, hero styles, page-specific layouts
   
   3. Component Modules:
      - navigation.css: Top banner, navbar, navigation states
      - buttons.css: Button variants, sizes, states, and special buttons
      - cards.css: All card components (book, news, event, interest cards)
      - forms.css: Form elements, newsletter form, validation states
      - special.css: Unique components (moon phases, spice levels, etc.)
   
   4. Utility Modules:
      - spacing.css: Margin and padding utilities
      - effects.css: Animations, transitions, shadows, transforms
   
   Benefits of this structure:
   - Better maintainability and organization
   - Easier to find and edit specific styles
   - Reduced CSS specificity conflicts
   - Reusable component patterns
   - Consistent design system through variables
   - Better performance through selective loading
   
   Usage in HTML:
   <link rel="stylesheet" href="assets/css/main.css">
   
   For development, individual modules can be loaded separately
   for debugging purposes.
   
   ======================================== */