/**
 * Main Stylesheet
 * Imports all CSS modules in correct order
 */

/* Reset and base styles */
@import url('./reset.css');
@import url('./variables.css');
@import url('./typography.css');

/* Layout and grid system */
@import url('./layout.css');

/* UI Components */
@import url('./components.css');
@import url('./category-showcase.css');
@import url('./image-loader.css');

/* Global styles */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-primary);
  overflow-x: hidden;
}

/* Ensure main content area accounts for fixed nav bars */
.main-content {
  min-height: 100vh;
  padding-top: 8px;
  padding-bottom: calc(var(--bottom-nav-height) + 16px);
}

@media (min-width: 768px) {
  .main-content {
    padding-bottom: 16px;
  }
}

@media (min-width: 1200px) {
  .main-content {
    padding-top: 8px;
  }
}

/* Smooth animations */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Selection color */
::selection {
  background-color: var(--color-primary);
  color: white;
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Image loading placeholder */
img[loading="lazy"] {
  background-color: var(--color-bg-secondary);
}

/* Scrollbar styling (Webkit browsers) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-secondary);
}