/* css/main.css - Main Import File for Handmade Shop 
   This file orchestrates all CSS imports in the correct order
   Created with love for your artisan shop! 🎨 */

/* ===== CORE STYLES ===== */
/* Foundation styles that everything else builds upon */
@import url('core/variables.css');    /* Design tokens and CSS custom properties */
@import url('core/reset.css');        /* Modern CSS reset for consistency */
@import url('core/typography.css');   /* Typography system and font scales */
@import url('core/utilities.css');    /* Utility classes for rapid development */

/* ===== LAYOUT STYLES ===== */
/* Grid systems, containers, and structural components */
@import url('layout/containers.css');  /* Container and wrapper styles */
@import url('layout/grid.css');       /* Grid system for responsive layouts */
/*@import url('layout/sections.css');   /* Page section styles */

/* ===== COMPONENT STYLES ===== */
/* Reusable UI components */
@import url('components/buttons.css');     /* Button variations and states */
@import url('components/cards.css');       /* Product cards and info cards */
@import url('components/forms.css');       /* Form elements and inputs */
@import url('components/badges.css');      /* Badges for "handmade", "new", etc */
@import url('components/navigation.css');  /* Header, nav, and menus */
/*@import url('components/modals.css');      /* Modal dialogs and overlays */
/*@import url('components/alerts.css');      /* Alert and notification styles */
/*@import url('components/cart.css');        /* Shopping cart components */

/* ===== THEME STYLES ===== */
/* Visual enhancements and animations */
/*@import url('themes/animations.css');  /* Subtle animations and transitions */
/*@import url('themes/patterns.css');    /* Background patterns and textures */

/* ===== PAGE SPECIFIC STYLES ===== */
/* Styles for individual pages */
/* @import url('pages/home.css');        /* Homepage specific styles */
/* @import url('pages/shop.css');        /* Shop/catalog page styles */
/* @import url('pages/product.css');     /* Product detail page styles */
/* @import url('pages/cart.css');        /* Shopping cart page styles */
/* @import url('pages/checkout.css');    /* Checkout process styles */
/* @import url('pages/about.css');       /* About page styles */

/* ===== VENDOR OVERRIDES ===== */
/* Customizations for third-party components */
/*@import url('vendor/overrides.css');  /* Override styles for plugins */

/* ===== PRINT STYLES ===== */
/* Print-specific styles loaded last */
/*@import url('print.css');

/* ===== GLOBAL STYLES ===== */
/* Additional global styles that don't fit elsewhere */

/* Ensure smooth scrolling is respected */
html {
  scroll-behavior: smooth;
}

/* Default focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Selection styles */
::selection {
  background-color: var(--color-teal-200);
  color: var(--color-teal-900);
}

/* ===== TEMPORARY STYLES ===== */
/* Use this section during development for quick tests */
/* Remember to move these to appropriate files when done! */

/* Example: Quick notification animation */
@keyframes notification-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ===== DEBUG MODE ===== */
/* Uncomment to enable visual debugging */
/*
* {
  outline: 1px solid rgba(255, 0, 0, 0.1);
}
*/