/* Form Components
 * Form input styles following BEM convention
 * Using Tailwind v4 @utility with @layer components
 */

@utility form-input {
  @layer components {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-base;
  }
}

@utility form-input--sm {
  @layer components {
    @apply px-3 py-2;
  }
}

@utility form-checkbox {
  @layer components {
    @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded;
  }
}

@utility form-label {
  @layer components {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
}

@utility form-label--inline {
  @layer components {
    @apply ml-2 block text-sm text-gray-700 mb-0;
  }
}

@utility form-group {
  @layer components {
    @apply space-y-2;
  }
}

@utility form-hint {
  @layer components {
    @apply text-sm text-gray-500;
  }
}