/**
 * RSite — Utility Classes  v1.0
 * Depends on: base.css (variables)
 *
 * Single-responsibility helpers: spacing, layout, typography.
 * No state, no animation — pure functional utilities.
 * Intentionally cascade-friendly: utilities override components when needed.
 */

/* 
   TYPOGRAPHY UTILITIES
*/

.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

.text-gold {
    color: var(--gold-accent);
}

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

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

/* 
   SPACING UTILITIES
*/

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-60 {
    margin-top: 60px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-60 {
    margin-bottom: 60px;
}

.p-20 {
    padding: 20px;
}

.p-30 {
    padding: 30px;
}

.p-35 {
    padding: 35px;
}

.p-40 {
    padding: 40px;
}

.p-50 {
    padding: 50px;
}

/* 
   FLEX UTILITIES
*/

.flex {
    display: flex;
}

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

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

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

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

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

/* 
   RESPONSIVE
*/

@media (max-width: 768px) {
    .flex-between {
        flex-direction: column;
        gap: var(--space-md);
    }
}