/* Design System Variables */
@import "./variables.css";

/* Reset & Base Styles */
@import "./reset-base.css";

/* Layout System */
@import "./layout.css";

/* Typography System */
@import "./typography.css";

/* Utility Classes */
@import "./utilities.css";

/* Reusable Components */
@import "./components.css";

@import "./section-headers.css";

@import "./animations.css";

@import "./pages-custom.css";

@import "./header-footer-unified.css";

/* Responsive Styles (Must be last) */
@import "./responsive.css";


/*
  Usage Guidelines:
  ================
  
  1. Always use CSS custom properties from variables.css
  2. Use semantic class names following BEM methodology where appropriate
  3. Keep components modular and reusable
  4. Test responsive behavior at all breakpoints
  5. Use the provided utility classes before writing custom styles
  6. Follow the established naming conventions
  
  File Structure:
  ==============
  /styles
    ├── main.css (this file)
    ├── variables.css
    ├── reset-base.css
    ├── layout.css
    ├── typography.css
    ├── utilities.css
    ├── components.css
    ├── navigation.css
    ├── slideshow.css
    ├── animations.css
    └── responsive.css
*/