/* ======================================== */
/* UTILITIES.CSS — GLOBAL UTILITY CLASSES  */
/* Mobile-first, Atomic Helper Utilities    */
/* ======================================== */

/* ---------------------------------------- */
/* 1. MARGIN UTILITIES                      */
/* ---------------------------------------- */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

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

.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------------------------------------- */
/* 2. PADDING UTILITIES                      */
/* ---------------------------------------- */
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

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

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

/* ---------------------------------------- */
/* 3. FLEX UTILITIES                        */
/* ---------------------------------------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

.wrap { flex-wrap: wrap; }

/* ---------------------------------------- */
/* 4. TEXT UTILITIES                        */
/* ---------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-bold { font-weight: bold; }
.text-light { color: var(--bvm-text-light); }
.text-dark { color: var(--bvm-text-dark); }
.text-primary { color: var(--bvm-primary); }

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

@media (min-width: 768px) {
  .d-md-block { display: block; }
  .d-md-none { display: none; }
}

/* ---------------------------------------- */
/* 6. WIDTH UTILITIES                       */
/* ---------------------------------------- */
.w-100 { width: 100%; }
.w-50 { width: 50%; }
.w-33 { width: 33%; }
.w-25 { width: 25%; }

@media (min-width: 768px) {
  .w-md-50 { width: 50%; }
  .w-md-33 { width: 33%; }
  .w-md-25 { width: 25%; }
}

/* ---------------------------------------- */
/* 7. BACKGROUND UTILITIES                  */
/* ---------------------------------------- */
.bg-primary { background: var(--bvm-primary); }
.bg-secondary { background: var(--bvm-secondary); }
.bg-accent { background: var(--bvm-accent); }
.bg-light { background: var(--bvm-bg-light); }
.bg-grey { background: var(--bvm-bg-grey); }

/* ---------------------------------------- */
/* 8. BORDER RADIUS                         */
/* ---------------------------------------- */
.round-sm { border-radius: var(--radius-sm); }
.round-md { border-radius: var(--radius-md); }
.round-lg { border-radius: var(--radius-lg); }

/* ---------------------------------------- */
/* 9. SHADOW UTILITIES                      */
/* ---------------------------------------- */
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }

/* ---------------------------------------- */
/* 10. POSITION UTILITIES                   */
/* ---------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* ---------------------------------------- */
/* 11. VISIBILITY UTILITIES                 */
/* ---------------------------------------- */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ---------------------------------------- */
/* 12. UTILITY HELPERS                      */
/* ---------------------------------------- */
.cursor-pointer { cursor: pointer; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* End of utilities.css */