@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans;
  }
}

@layer components {
  /* PrimeVue Migration - Simplified CSS */

  /* Brand Gradient Text Utilities */
  .gradient-text-yellow {
    color: #FFD600; /* Fallback color for unsupported browsers */
    background: linear-gradient(90deg, #FFD600 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @supports not (-webkit-background-clip: text) {
    .gradient-text-yellow {
      color: #FFD600 !important;
      -webkit-text-fill-color: #FFD600 !important;
    }
  }

  /* Skip Navigation Link for Accessibility */
  .skip-link {
    @apply absolute left-0 top-0 bg-yellow text-black px-4 py-2 z-50 -translate-y-full focus:translate-y-0 transition-transform duration-200;
  }

  /* Enhanced Focus Visibility */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-yellow;
  }

  /* Basic form styles - will be replaced with PrimeVue components */
  .form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md text-black placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow focus:border-yellow transition-colors duration-200;
  }

  .form-select {
    @apply form-input bg-white;
  }

  .form-textarea {
    @apply form-input;
  }

  .form-checkbox {
    @apply h-4 w-4 text-yellow border-gray-300 rounded focus:ring-yellow;
  }

  .form-radio {
    @apply h-4 w-4 text-yellow border-gray-300 focus:ring-yellow;
  }

  .form-label {
    @apply block text-sm font-medium text-black mb-1;
  }

  .form-error {
    @apply mt-1 text-sm text-red-600;
  }

  .form-group {
    @apply mb-4;
  }

  /* Loading States */
  .loading-spinner {
    @apply inline-block w-8 h-8 border-4 border-yellow/20 border-t-yellow rounded-full animate-spin;
  }

  .skeleton {
    @apply animate-pulse bg-gray-200 rounded;
  }

  .skeleton-text {
    @apply h-4 skeleton mb-2;
  }

  .skeleton-title {
    @apply h-6 skeleton mb-3 w-3/4;
  }

  .skeleton-box {
    @apply h-32 skeleton;
  }
}