/**
 * Main CSS File
 * Imports all modular CSS files
 * 
 * This replaces inline styles and provides a clean,
 * maintainable CSS architecture
 */

/* Core - Foundation */
@import url('./core/variables.css');
@import url('./core/reset.css');
@import url('./core/typography.css');

/* Layouts - Structure */
@import url('./layouts/grid.css');
@import url('./layouts/header.css');
@import url('./layouts/footer.css');

/* Components - Reusable UI */
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/forms.css');
@import url('./components/modals.css');
@import url('./components/navigation.css');
@import url('./components/search.css');

/* Mobile Optimizations */
@import url('./mobile-optimizations.css');

/* Base body styles */
body {
  background-color: var(--color-off-white);
  overflow-x: hidden;
}

/* Utility classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Spacing utilities */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Display utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Responsive utilities */
@media (max-width: 900px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 901px) {
  .hide-desktop { display: none !important; }
}