/* Main CSS File - Import all styles */

/* 1. Base styles - foundational styles that need to load first */
@import './base/reset.css';
@import './base/variables.css';
@import './base/typography.css';
@import './base/layout.css';

/* 2. Component styles - reusable UI components */
@import './components/buttons.css';
@import './components/forms.css';
@import './components/modals.css';
@import './components/tables.css';
@import './components/navigation.css';
@import './components/cards.css';

/* 3. Page-specific styles - styles for specific pages */
@import './pages/auth.css';
@import './pages/projects.css';
@import './pages/admin.css';

/* 4. Utility styles - helper classes that override component styles */
@import './utilities/spacing.css';
@import './utilities/colors.css';
@import './utilities/display.css';
@import './utilities/position.css';
@import './utilities/responsive.css';

/* Custom project styles can be added below or in separate files */

/* Global utility classes */
.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;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Focus management */
.focus-ring:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    
    thead {
        display: table-header-group;
    }
    
    tr,
    img {
        page-break-inside: avoid;
    }
    
    img {
        max-width: 100% !important;
    }
    
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    
    h2,
    h3 {
        page-break-after: avoid;
    }
}