/**
 * MAAR Concept - Main Stylesheet
 * Sistema modular de CSS
 * 
 * ORDEM DE IMPORTAÇÃO:
 * 1. Base (variáveis e reset)
 * 2. Components (reutilizáveis)
 * 3. Pages (específicas de página)
 */

/* ===== BASE ===== */
@import url('./base/variables.css');
@import url('./base/reset.css');

/* ===== COMPONENTS ===== */
@import url('./components/buttons.css');
@import url('./components/forms.css');
@import url('./components/cards.css');
@import url('./components/element-cards.css');
@import url('./components/title-separator.css');
@import url('./components/navbar.css');
@import url('./components/footer.css');

/* ===== PAGES ===== */
@import url('./pages/homepage.css');

/* ===== UTILITY CLASSES ===== */
.container-custom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.text-center {
    text-align: center;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-2 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-3 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-4 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-5 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

.bg-cream-light { background-color: var(--color-cream-light); }
.bg-cream { background-color: var(--color-cream); }
.bg-terracota { background-color: var(--color-terracota); }
.bg-white { background-color: #ffffff; }

.text-terracota { color: var(--color-terracota); }
.text-brown-dark { color: var(--color-brown-dark); }
.text-brown { color: var(--color-brown); }
.text-white { color: #ffffff; }

.rounded { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }