/* ===================================
   UTILITIES - Spacing, Colors, Display
   =================================== */

/* Margin utilities */
.m-0 {
  margin: 0 !important;
}
.m-1 {
  margin: var(--space-1) !important;
}
.m-2 {
  margin: var(--space-2) !important;
}
.m-3 {
  margin: var(--space-3) !important;
}
.m-4 {
  margin: var(--space-4) !important;
}
.m-5 {
  margin: var(--space-5) !important;
}

.ml-0 {
  margin-left: 0 !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}

.ml-1 {
  margin-left: var(--space-1) !important;
}
.mr-1 {
  margin-right: var(--space-1) !important;
}
.mt-1 {
  margin-top: var(--space-1) !important;
}
.mb-1 {
  margin-bottom: var(--space-1) !important;
}

.ml-5 {
  margin-left: var(--space-5) !important;
}
.mr-5 {
  margin-right: var(--space-5) !important;
}
.mt-5 {
  margin-top: var(--space-5) !important;
}
.mb-5 {
  margin-bottom: var(--space-5) !important;
}
.my-5 {
  margin-top: var(--space-5) !important;
  margin-bottom: var(--space-5) !important;
}
.mx-5 {
  margin-left: var(--space-5) !important;
  margin-right: var(--space-5) !important;
}

/* Padding utilities */
.p-0 {
  padding: 0 !important;
}
.p-1 {
  padding: var(--space-1) !important;
}
.p-2 {
  padding: var(--space-2) !important;
}
.p-3 {
  padding: var(--space-3) !important;
}
.p-4 {
  padding: var(--space-4) !important;
}
.p-5 {
  padding: var(--space-5) !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.pr-1 {
  padding-right: var(--space-1) !important;
}
.pl-2 {
  padding-left: var(--space-2) !important;
}

/* Display utilities */
.d-block {
  display: block;
}
.d-inline {
  display: inline;
}
.d-inline-block {
  display: inline-block;
}
.d-flex {
  display: flex;
}
.d-none {
  display: none;
}

/* Background colors */
.bg-dark {
  background-color: var(--color-dark) !important;
}
.bg-info {
  background-color: var(--color-primary) !important;
}
.bg-light {
  background-color: var(--color-bg-light) !important;
}
.bg-white {
  background-color: var(--color-white) !important;
}

/* Rounded corners */
.rounded {
  border-radius: var(--border-radius);
}
.rounded-lg {
  border-radius: var(--border-radius-lg);
}

/* Auto centering */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}