/**
 * RocketBank Design System - Utilities & Helper Classes
 * Spacing, typography, animations, scroll-snap & accessibility helpers
 */

@layer utilities {
  /* Screen Reader Only (Visually Hidden) */
  .sr-only,
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Flexbox & Grid */
  .d-flex { display: flex; }
  .d-inline-flex { display: inline-flex; }
  .d-grid { display: grid; }
  .d-block { display: block; }
  .d-none { display: none; }

  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .items-end { align-items: flex-end; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .justify-end { justify-content: flex-end; }
  .flex-1 { flex: 1 1 0%; }
  .flex-grow { flex-grow: 1; }

  .gap-xs { gap: var(--space-xs); }
  .gap-sm { gap: var(--space-sm); }
  .gap-md { gap: var(--space-md); }
  .gap-lg { gap: var(--space-lg); }
  .gap-xl { gap: var(--space-xl); }

  /* Spacing Utilities */
  .m-0 { margin: 0 !important; }
  .mt-sm { margin-top: var(--space-sm); }
  .mt-md { margin-top: var(--space-md); }
  .mt-lg { margin-top: var(--space-lg); }
  .mt-xl { margin-top: var(--space-xl); }

  .mb-0 { margin-bottom: 0 !important; }
  .mb-xs { margin-bottom: var(--space-xs); }
  .mb-sm { margin-bottom: var(--space-sm); }
  .mb-md { margin-bottom: var(--space-md); }
  .mb-lg { margin-bottom: var(--space-lg); }
  .mb-xl { margin-bottom: var(--space-xl); }

  .p-0 { padding: 0 !important; }
  .p-sm { padding: var(--space-sm); }
  .p-md { padding: var(--space-md); }
  .p-lg { padding: var(--space-lg); }
  .p-xl { padding: var(--space-xl); }

  /* Typography Utilities */
  .text-left { text-align: left; }
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .text-muted { color: var(--text-muted) !important; }
  .text-primary { color: var(--text-primary) !important; }
  .text-secondary { color: var(--text-secondary) !important; }
  .text-success { color: var(--color-success) !important; }
  .text-warning { color: var(--color-warning) !important; }
  .text-danger { color: var(--color-danger) !important; }
  .text-brand { color: var(--color-primary) !important; }
  .font-bold { font-weight: 700; }
  .font-semibold { font-weight: 600; }
  .font-mono { font-family: var(--font-family-mono); }
  .text-uppercase { text-transform: uppercase; letter-spacing: 0.05em; }

  /* Width & Height */
  .w-100 { width: 100%; }
  .h-100 { height: 100%; }

  /* Animation Utilities */
  .animate-fade-in { animation: fadeIn var(--transition-base) ease-out forwards; }
  .animate-slide-down { animation: slideDown var(--transition-base) ease-out forwards; }
  .animate-pulse { animation: pulseGlow 2s infinite; }
  .animate-float { animation: floatBadge 3s ease-in-out infinite; }

  /* Modern Scroll-Snap Feature */
  .scroll-snap-x {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch;
  }

  .scroll-snap-item {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}