/*
=================================================================
    UTILITIES & HELPERS
=================================================================

    Utility classes for quick styling adjustments, spacing,
    text alignment, visibility, etc.
*/

/* ===== SPACING UTILITIES ===== */
.mt-xs { margin-top: var(--spacing-xs); }
.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); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.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); }

.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }


/* ===== TEXT UTILITIES ===== */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }

.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-lowercase { text-transform: lowercase; }

.text-bold { font-weight: var(--font-weight-bold); }
.text-medium { font-weight: var(--font-weight-medium); }
.text-normal { font-weight: var(--font-weight-normal); }


/* ===== DISPLAY UTILITIES ===== */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }


/* ===== ALIGNMENT UTILITIES ===== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }


/* ===== VISIBILITY UTILITIES ===== */
.hidden { visibility: hidden; }
.visible { visibility: visible; }


/* ===== FLEXBOX UTILITIES ===== */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

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


/* ===== BACKGROUND UTILITIES ===== */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-dark { background-color: var(--bg-dark); }


/* ===== BORDER UTILITIES ===== */
.border { border: 1px solid var(--border-color); }
.border-radius-sm { border-radius: var(--border-radius-sm); }
.border-radius-md { border-radius: var(--border-radius-md); }
.border-radius-lg { border-radius: var(--border-radius-lg); }
.border-radius-circle { border-radius: var(--border-radius-circle); }


/* ===== SHADOW UTILITIES ===== */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }