// Utility Classes
.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;
}

// Spacing utilities
.space-y-2 > * + * { margin-top: $spacing-sm; }
.space-y-3 > * + * { margin-top: $spacing-md; }
.space-y-4 > * + * { margin-top: $spacing-lg; }
.space-y-6 > * + * { margin-top: $spacing-xl; }

.space-x-2 > * + * { margin-left: $spacing-sm; }
.space-x-3 > * + * { margin-left: $spacing-md; }
.space-x-4 > * + * { margin-left: $spacing-lg; }

// Margin utilities
.m-0 { margin: 0; }
.mb-1 { margin-bottom: $spacing-xs; }
.mb-2 { margin-bottom: $spacing-sm; }
.mb-3 { margin-bottom: $spacing-md; }
.mb-4 { margin-bottom: $spacing-lg; }

.mt-1 { margin-top: $spacing-xs; }
.mt-2 { margin-top: $spacing-sm; }
.mt-3 { margin-top: $spacing-md; }
.mt-4 { margin-top: $spacing-lg; }

// Padding utilities  
.p-0 { padding: 0; }
.p-1 { padding: $spacing-xs; }
.p-2 { padding: $spacing-sm; }
.p-3 { padding: $spacing-md; }
.p-4 { padding: $spacing-lg; }

// Width utilities
.w-full { width: 100%; }
.w-auto { width: auto; }

// Height utilities
.h-full { height: 100%; }
.h-auto { height: auto; }

// Color utilities
.text-primary { color: $primary; }
.text-secondary { color: $secondary; }
.text-success { color: $success; }
.text-warning { color: $warning; }
.text-danger { color: $danger; }

.text-gray-400 { color: $gray-400; }
.text-gray-500 { color: $gray-500; }
.text-gray-600 { color: $gray-600; }
.text-gray-700 { color: $gray-700; }
.text-gray-900 { color: $gray-900; }

// Background utilities
.bg-primary { background-color: $primary; }
.bg-white { background-color: white; }
.bg-gray-50 { background-color: $gray-50; }
.bg-gray-100 { background-color: $gray-100; }

// Border utilities
.border { border: 1px solid $gray-200; }
.border-0 { border: 0; }
.border-gray-100 { border-color: $gray-100; }
.border-gray-200 { border-color: $gray-200; }

// Border radius utilities
.rounded { border-radius: $radius-md; }
.rounded-lg { border-radius: $radius-lg; }
.rounded-xl { border-radius: $radius-xl; }
.rounded-2xl { border-radius: $radius-2xl; }
.rounded-full { border-radius: 9999px; }

// Shadow utilities
.shadow-sm { box-shadow: $shadow-sm; }
.shadow-md { box-shadow: $shadow-md; }
.shadow-lg { box-shadow: $shadow-lg; }
.shadow-xl { box-shadow: $shadow-xl; }

// Position utilities
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

// Z-index utilities
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

// Overflow utilities
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

// Cursor utilities
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

// Opacity utilities
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }