/**
 * Happy Store Design System - Main Stylesheet
 * 
 * This file imports all design system components in the correct order.
 * Include this single file in your templates to get the full design system.
 * 
 * @version 1.1.0
 * @updated 2026-02-07
 */

/* ========================================
   1. CORE (must be first)
   ======================================== */

/* Design tokens - CSS custom properties */
@import 'core/_variables.css';

/* CSS reset for consistent baseline */
@import 'core/_reset.css';

/* Typography scale and text utilities */
@import 'core/_typography.css';

/* Layout and spacing utilities */
@import 'core/_utilities.css';


/* ========================================
   2. COMPONENTS
   ======================================== */

/* Buttons */
@import 'components/_buttons.css';

/* Form controls */
@import 'components/_forms.css';

/* Cards */
@import 'components/_cards.css';

/* Badges and status indicators */
@import 'components/_badges.css';

/* Tables */
@import 'components/_tables.css';

/* Toast Notifications */
@import 'components/_toasts.css';

/* Pagination */
@import 'components/_pagination.css';

/* Modals and overlays */
@import 'components/_modals.css';


/* ========================================
   3. LAYOUTS
   ======================================== */

/* App shell layout */
@import 'layouts/_app-layout.css';


/* ========================================
   4. UTILITIES (high specificity overrides)
   These come last to ensure they can override component styles
   ======================================== */

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    .app-sidebar,
    .app-header {
        display: none !important;
    }
    
    .app-main {
        margin-left: 0 !important;
    }
}

/* Screen reader only utilities (keep at end) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}