/* 
 * Eterea Website Styles
 * Phase 2: Modular Component Architecture
 * Using CSS Custom Properties and Component-Based Design
 */

/* Foundation Layer - Import in correct order */
@import url('./foundation/variables.css');
@import url('./foundation/reset.css'); 
@import url('./foundation/base.css');
@import url('./foundation/utilities.css');

/* Layout Components */
@import url('./layout/navigation.css');
@import url('./layout/footer.css');

/* UI Components */
@import url('./components/buttons.css');
@import url('./components/hero.css');
@import url('./components/cards.css');
@import url('./components/contact.css');

/* Animation System */
@import url('./animations/keyframes.css');
@import url('./animations/scroll-effects.css');
@import url('./animations/transitions.css');

/* =============================================================================
   REMAINING COMPONENT STYLES (To be extracted in future phases)
   ============================================================================= */

/* Section Layout */
section {
    padding: var(--section-padding) 0;
}

.section-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--color-primary-900);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    line-height: var(--line-height-relaxed);
}

/* Container System */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}


/* =============================================================================
   RESPONSIVE DESIGN SYSTEM (Phase 5 - To be optimized)
   ============================================================================= */

/* Tablet Responsive */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-lg);
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .section-title {
        font-size: var(--font-size-xl);
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--container-padding-sm);
    }
    
    .section-title {
        font-size: var(--font-size-lg);
    }
}