/* Utilities CSS - Small utility classes for spacing, text, display, etc. */

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

.text-4xl {
  font-size: 2.5rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-lg {
  font-size: 1.125rem;
}

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

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

/* ============================================
   Font Utilities
   ============================================ */
.font-semibold {
  font-weight: 600;
}

.font-normal {
  font-weight: 400;
}

/* ============================================
   Spacing Utilities - Margin
   ============================================ */
.mb-2 {
  margin-bottom: var(--spacing-sm);
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: var(--spacing-md);
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-12 {
  margin-bottom: var(--spacing-xl);
}

.mt-1 {
  margin-top: var(--spacing-xs);
}

.mt-4 {
  margin-top: var(--spacing-md);
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-16 {
  margin-top: var(--spacing-xl);
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.ml-2 {
  margin-left: var(--spacing-sm);
}

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

/* ============================================
   Display Utilities
   ============================================ */
.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
  
  .mobile-only.flex,
  .mobile-only.inline-flex {
    display: flex;
  }

  .btn .mobile-only,
  a.btn .mobile-only,
  button.btn .mobile-only {
    display: inline;
  }
  
  .desktop-only {
    display: none !important;
  }
}

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

/* ============================================
   Width Utilities
   ============================================ */
.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-4xl {
  max-width: 56rem;
}

/* ============================================
   Display Utilities
   ============================================ */
.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Overflow Utilities
   ============================================ */
.overflow-hidden {
  overflow: hidden;
}

/* ============================================
   Box Utilities
   ============================================ */
.box-border {
  box-sizing: border-box;
}

/* ============================================
   Alignment Utilities
   ============================================ */
.align-start {
  align-items: flex-start;
}

.align-self-start {
  align-self: flex-start;
}

/* ============================================
   Flex Utilities
   ============================================ */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
}

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

.gap-2 {
  gap: 0.5rem;
}

.gap-12 {
  gap: var(--spacing-md);
}

.gap-xs {
  gap: var(--spacing-xs);
}

/* ============================================
   Disabled Link Utility
   ============================================ */
.disabled-link,
.topnav-link.disabled,
.topnav-link[aria-disabled="true"],
.btn.disabled,
.btn[aria-disabled="true"] {
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}