/**
 * Main CSS - Import Orchestrator
 * 
 * This file imports all CSS modules in the correct order.
 * It should contain NO styles itself - only imports.
 * 
 * Order matters:
 * 1. Base (variables, reset, utilities)
 * 2. Components (reusable UI elements)
 * 3. Layouts (page structure)
 * 4. Modules (module-specific patterns)
 */

/* ==========================================
   1. BASE LAYER
   Foundation: Variables, Reset, Utilities
   ========================================== */

@import url('base/variables.css');
@import url('base/reset.css');
@import url('base/utilities.css');

/* ==========================================
   2. COMPONENTS LAYER
   Reusable UI Components
   ========================================== */

@import url('components/buttons.css');
@import url('components/forms.css');
@import url('components/cards.css');
@import url('components/navigation.css');
@import url('components/modals.css');
@import url('components/feedback.css');

/* ==========================================
   3. LAYOUTS LAYER
   Page Structure & Grid Systems
   ========================================== */

@import url('layouts/container.css');
@import url('layouts/sections.css');

/* ==========================================
   4. MODULES LAYER
   Module-Specific Patterns
   
   Note: module-base.css is imported in module pages.
   Individual module files are imported only in their respective pages.
   ========================================== */

/* Module base is imported in module HTML files, not here */

/* ==========================================
   GLOBAL ACCESSIBILITY STYLES
   (Minimal - kept here as they apply globally)
   ========================================== */

/* Focus visible for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
    position: relative;
    z-index: 1;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Keyboard navigation indicator */
body.keyboard-nav *:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}