/* Layout Styles */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--section-padding) 0;
}

.section--gray {
    background-color: var(--color-bg-light);
}

.section--white {
    background-color: var(--color-bg-white);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-4xl);
}

.section-header__title {
    font-size: var(--text-4xl);
    color: var(--color-secondary);
    margin-bottom: var(--spacing-md);
}

.section-header__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-xl);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Flexbox Utilities */
.flex {
    display: flex;
}

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    align-items: center;
    justify-content: space-between;
}

.flex--column {
    flex-direction: column;
}

.flex--wrap {
    flex-wrap: wrap;
}

.gap--sm {
    gap: var(--spacing-sm);
}

.gap--md {
    gap: var(--spacing-md);
}

.gap--lg {
    gap: var(--spacing-lg);
}

.gap--xl {
    gap: var(--spacing-xl);
}

/* Spacing Utilities */
.mt--sm { margin-top: var(--spacing-sm); }
.mt--md { margin-top: var(--spacing-md); }
.mt--lg { margin-top: var(--spacing-lg); }
.mt--xl { margin-top: var(--spacing-xl); }
.mt--2xl { margin-top: var(--spacing-2xl); }

.mb--sm { margin-bottom: var(--spacing-sm); }
.mb--md { margin-bottom: var(--spacing-md); }
.mb--lg { margin-bottom: var(--spacing-lg); }
.mb--xl { margin-bottom: var(--spacing-xl); }
.mb--2xl { margin-bottom: var(--spacing-2xl); }

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