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

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

.main-content {
    flex: 1;
}

/* Typography */
.h1 { font-size: var(--font-size-3xl); font-weight: 800; }
.h2 { font-size: var(--font-size-2xl); font-weight: 700; }
.h3 { font-size: var(--font-size-xl); font-weight: 600; }
.h4 { font-size: var(--font-size-lg); font-weight: 600; }

.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }

/* Display */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-3 { gap: var(--spacing-md); }

/* Spacing */
.mt-2 { margin-top: var(--spacing-sm); }
.mt-4 { margin-top: var(--spacing-md); }
.mt-6 { margin-top: var(--spacing-lg); }
.mt-8 { margin-top: var(--spacing-xl); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-4 { margin-bottom: var(--spacing-md); }
.mb-6 { margin-bottom: var(--spacing-lg); }
.mb-8 { margin-bottom: var(--spacing-xl); }
.py-8 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.p-6 { padding: var(--spacing-lg); }

/* Grid */
.grid { display: grid; gap: var(--spacing-md); }
.md-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
    .md-grid-cols-3 { grid-template-columns: 1fr; }
}