/* utilities.css — Small single-purpose helpers */

/* Text utilities */
.text-center {
  text-align: center;
}

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

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

.text-white {
  color: var(--color-white) !important; /* Only text color needs to override */
}

.text-primary {
  color: var(--color-primary) !important;
}

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

/* Margin utilities */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-sm) !important; }
.mt-2 { margin-top: var(--spacing-md) !important; }
.mt-3 { margin-top: var(--spacing-lg) !important; }
.mt-4 { margin-top: var(--spacing-xl) !important; }
.mt-5 { margin-top: var(--spacing-2xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-sm) !important; }
.mb-2 { margin-bottom: var(--spacing-md) !important; }
.mb-3 { margin-bottom: var(--spacing-lg) !important; }
.mb-4 { margin-bottom: var(--spacing-xl) !important; }
.mb-5 { margin-bottom: var(--spacing-2xl) !important; }

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

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-sm) !important; }
.p-2 { padding: var(--spacing-md) !important; }
.p-3 { padding: var(--spacing-lg) !important; }
.p-4 { padding: var(--spacing-xl) !important; }
.p-5 { padding: var(--spacing-2xl) !important; }

/* Display utilities */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

.d-grid {
  display: grid !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

/* Flex utilities */
.flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

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

.flex-column {
  flex-direction: column !important;
}

.gap-1 {
  gap: var(--spacing-sm) !important;
}

.gap-2 {
  gap: var(--spacing-md) !important;
}

.gap-3 {
  gap: var(--spacing-lg) !important;
}

.gap-4 {
  gap: var(--spacing-xl) !important;
}

/* Width utilities */
.w-100 {
  width: 100% !important;
}

.w-50 {
  width: 50% !important;
}

/* Opacity utilities */
.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

/* Background utilities */
.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-light {
  background-color: var(--color-bg-light) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

/* Hide on certain screens */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .show-mobile {
    display: none !important;
  }
}

/* Container utilities */
.container {
  max-width: var(--container-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--container-padding) !important;
}

/* Separator/divider */
.divider {
  border-top: 1px solid var(--color-border) !important;
  margin: var(--spacing-2xl) 0 !important;
}

/* Rounded utilities */
.rounded {
  border-radius: var(--border-radius-md) !important;
}

.rounded-lg {
  border-radius: var(--border-radius-lg) !important;
}

.rounded-full {
  border-radius: 9999px !important;
}

/* Shadow utilities */
.shadow {
  box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

/* Overflow utilities */
.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

/* Text truncate */
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Clearfix */
.clearfix::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}