/* ========================================
   utilities.css - Minimal Utility Classes
   Only what is actually needed (no full Tailwind recreation)
   ======================================== */


/* ========================================
   Display
   ======================================== */

.hidden {
  display: none !important;
}


/* ========================================
   Flex Helpers
   ======================================== */

.flex {
  display: flex;
}

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

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}


/* ========================================
   Text Helpers
   ======================================== */

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

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

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


/* ========================================
   Width Helpers
   ======================================== */

.w-full {
  width: 100%;
}


/* ========================================
   Spacing Helpers
   ======================================== */

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


/* ========================================
   Visibility for Screen Readers
   ======================================== */

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