/**
 * Main CSS Entry Point
 * Imports all stylesheets in the correct order for the luxury dark theme
 *
 * Order of imports:
 * 1. Core - Variables, reset, typography, utilities
 * 2. Components - Reusable UI components
 * 3. Layouts - Page structure and layouts
 * 4. Animations - Transitions, keyframes, and loading states
 */

/* ============================================
   CORE STYLES
   Foundation styles that everything else depends on
   ============================================ */

/* Design tokens (colors, typography, spacing, shadows, etc.) */
@import url('core/variables.css');

/* CSS reset and base dark theme styles */
@import url('core/reset.css');

/* Font imports and text styling */
@import url('core/typography.css');

/* Utility classes for rapid development */
@import url('core/utilities.css');

/* ============================================
   COMPONENT STYLES
   Reusable UI components
   ============================================ */

/* Button styles with gold accents */
@import url('components/buttons.css');

/* Product cards and stat cards */
@import url('components/cards.css');

/* Form inputs, selects, checkboxes, etc. */
@import url('components/forms.css');

/* Modals and dialogs (quick view, confirmation, etc.) */
@import url('components/modals.css');

/* Filter sidebar with range sliders */
@import url('components/filters.css');

/* Admin data tables */
@import url('components/tables.css');

/* ============================================
   LAYOUT STYLES
   Page structure and major layout components
   ============================================ */

/* Site header with navigation */
@import url('layouts/header.css');

/* Site footer with multi-column layout */
@import url('layouts/footer.css');

/* Product grid and shop page layout */
@import url('layouts/grid.css');

/* Admin panel with sidebar navigation */
@import url('layouts/admin-layout.css');

/* ============================================
   ANIMATION STYLES
   Transitions, keyframes, and loading states
   ============================================ */

/* Transition utility classes */
@import url('animations/transitions.css');

/* Keyframe animation definitions */
@import url('animations/keyframes.css');

/* Loading spinners and skeleton loaders */
@import url('animations/loading.css');

/* ============================================
   MOBILE FIXES
   Mobile-specific responsive improvements
   ============================================ */

/* Mobile responsiveness fixes and enhancements */
@import url('mobile-fixes.css');

/* ============================================
   THEME NOTES

   This design system provides a luxury dark theme with:
   - Dark backgrounds (#0a0a0a, #1a1a1a, #242424)
   - Gold accents (#D4AF37) for CTAs and highlights
   - Playfair Display serif for headings (luxury feel)
   - Inter sans-serif for body text (clean readability)
   - 8px spacing grid for consistent layouts
   - Smooth transitions and animations
   - Full responsive design (mobile-first)
   - WCAG AA accessibility compliance

   Browser Support:
   - Chrome/Edge (latest 2 versions)
   - Firefox (latest 2 versions)
   - Safari (latest 2 versions)

   Total CSS bundle size: ~40KB (minified)
   ============================================ */

/* ============================================
   CUSTOM SCROLLBAR (Global)
   Already defined in reset.css, but can be overridden here
   ============================================ */

/* ============================================
   DEBUG UTILITIES (Remove in production)
   ============================================ */

/* Uncomment to show layout debugging */
/*
.debug * {
  outline: 1px solid rgba(212, 175, 55, 0.3);
}

.debug *:hover {
  outline: 1px solid var(--accent-gold);
}
*/