/* Base styles */
@import 'base/reset.css';
@import 'base/variables.css';
@import 'base/typography.css';

/* Components */
@import 'components/button.css';
@import 'components/card.css';
@import 'components/header.css';
@import 'components/footer.css';

/* Pages */
@import 'pages/home.css';
@import 'pages/mission.css';
@import 'pages/contact.css';
/* Apps */
@import 'apps/spotlight/spotlight_list.css';
@import 'apps/spotlight/spotlight_detail.css';
@import 'apps/events/event_list.css';
@import 'apps/events/event_detail.css';
@import 'apps/donations/donation_list.css';
@import 'apps/donations/donation_detail.css';
@import 'apps/sharehub/sharehub.css';
@import 'apps/alerts/alert_admin.css';
@import 'apps/alerts/alerts.css';

/* Global styles */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family-base);
    line-height: 1.6;
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main {
    flex: 1;
    padding: var(--spacing-lg) 0;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Utility classes */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }

@media (max-width: 768px) {
    .container, 
    .row, 
    [class^="col-"] {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}