/*
 * ========================================
 * EMX Design System - Combined CSS
 * Version: 1.0.0
 * Responsive design for both desktop and mobile
 * ========================================
 */

/* Importing consolidated styles */
@import url('/template/eama/css/merged-base.css');
@import url('/template/eama/css/merged-core.css');
@import url('/template/eama/css/merged-components.css');
@import url('/template/eama/css/merged-pwa.css');

/* Additional components */
@import url('/template/eama/css/lucide-icons.css'); /* Lucide icons */
@import url('/template/eama/css/emx-swiper.css'); /* Swiper slider */
@import url('/template/eama/css/swiper-integration.css'); /* Swiper advanced integration */
@import url('/template/eama/css/advanced-backgrounds.css'); /* Advanced backgrounds & effects */
@import url('/template/eama/css/neumorphism-3d.css'); /* Neumorphism & 3D effects */

/* Media queries for responsive design */
/* Default styles are mobile-first, inherit from PWA */

/* Larger screens (desktop) */
@media (min-width: 768px) {
  /* Desktop-specific overrides */
  :root {
    --emx-header-height: 80px;
    --emx-content-max-width: 1200px;
    --emx-card-border-radius: 8px;
  }
  
  /* Use desktop padding and margins */
  .emx-container {
    padding: var(--emx-spacing-md);
    max-width: var(--emx-content-max-width);
    margin: 0 auto;
  }
}

/* Responsive grid system */
.emx-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--emx-spacing-sm);
}

@media (min-width: 768px) {
  .emx-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: var(--emx-spacing-md);
  }
}

@media (min-width: 1024px) {
  .emx-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--emx-spacing-lg);
  }
}

/* Responsive components */
.emx-card {
  border-radius: var(--emx-card-border-radius);
  padding: var(--emx-spacing-sm);
  background: var(--emx-surface-color);
  box-shadow: var(--emx-shadow-sm);
}

@media (min-width: 768px) {
  .emx-card {
    padding: var(--emx-spacing-md);
    box-shadow: var(--emx-shadow-md);
  }
}

/* Responsive typography */
.emx-heading {
  font-size: var(--emx-font-size-lg);
  font-weight: 700;
}

@media (min-width: 768px) {
  .emx-heading {
    font-size: var(--emx-font-size-xl);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --emx-text-color: var(--emx-light-text);
    --emx-surface-color: var(--emx-dark-surface);
    --emx-background-color: var(--emx-dark-background);
  }
}

/* Custom class for enabling dark mode */
.emx-dark-mode {
  --emx-text-color: var(--emx-light-text);
  --emx-surface-color: var(--emx-dark-surface);
  --emx-background-color: var(--emx-dark-background);
}