/**
 * RSVPme Component Library
 * Standardized components following the style guide
 * Version: 1.0.0
 */

/* ============================================
   BUTTONS
   ============================================ */

/* Primary Button - Gradient */
.btn-primary {
  @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white;
  @apply px-6 py-3 rounded-lg font-semibold;
  @apply hover:from-purple-700 hover:to-pink-700;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500;
  @apply transition-all transform hover:scale-[1.02] shadow-lg;
  @apply text-sm md:text-base;
}

/* Primary Button - Small */
.btn-primary-sm {
  @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white;
  @apply px-4 py-2 rounded-lg font-semibold;
  @apply hover:from-purple-700 hover:to-pink-700;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500;
  @apply transition-all transform hover:scale-[1.02] shadow;
  @apply text-sm;
}

/* Secondary Button - Outline */
.btn-secondary {
  @apply bg-white text-purple-600 border-2 border-purple-600;
  @apply px-6 py-3 rounded-lg font-semibold;
  @apply hover:bg-purple-50;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500;
  @apply transition-all transform hover:scale-[1.02];
  @apply text-sm md:text-base;
}

/* Ghost Button - Transparent */
.btn-ghost {
  @apply bg-white/10 backdrop-blur-sm text-white;
  @apply border border-white/30 px-6 py-3 rounded-full;
  @apply font-medium hover:bg-white/20;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white/50;
  @apply transition-all transform hover:scale-[1.02];
  @apply text-sm md:text-base;
}

/* Danger Button */
.btn-danger {
  @apply bg-red-600 text-white;
  @apply px-6 py-3 rounded-lg font-semibold;
  @apply hover:bg-red-700;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
  @apply transition-all transform hover:scale-[1.02] shadow-lg;
  @apply text-sm md:text-base;
}

/* Success Button */
.btn-success {
  @apply bg-green-600 text-white;
  @apply px-6 py-3 rounded-lg font-semibold;
  @apply hover:bg-green-700;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500;
  @apply transition-all transform hover:scale-[1.02] shadow-lg;
  @apply text-sm md:text-base;
}

/* Disabled State */
.btn-disabled {
  @apply opacity-50 cursor-not-allowed;
  @apply hover:scale-100 !important;
}

/* ============================================
   FORM INPUTS
   ============================================ */

/* Standard Input */
.input-standard {
  @apply w-full px-4 py-2.5 md:py-3;
  @apply border border-gray-300 rounded-lg;
  @apply focus:ring-2 focus:ring-purple-500 focus:border-transparent;
  @apply transition-all placeholder-gray-400;
  @apply text-sm md:text-base;
}

/* Input Error State */
.input-error {
  @apply border-red-300 focus:ring-red-500;
}

/* Input Success State */
.input-success {
  @apply border-green-300 focus:ring-green-500;
}

/* Select Dropdown */
.select-standard {
  @apply w-full px-4 py-2.5 md:py-3;
  @apply border border-gray-300 rounded-lg bg-white;
  @apply focus:ring-2 focus:ring-purple-500 focus:border-transparent;
  @apply transition-all;
  @apply text-sm md:text-base;
}

/* Textarea */
.textarea-standard {
  @apply w-full px-4 py-2.5 md:py-3;
  @apply border border-gray-300 rounded-lg;
  @apply focus:ring-2 focus:ring-purple-500 focus:border-transparent;
  @apply transition-all placeholder-gray-400 resize-y;
  @apply text-sm md:text-base;
}

/* Checkbox */
.checkbox-standard {
  @apply h-4 w-4 text-purple-600;
  @apply focus:ring-purple-500 border-gray-300 rounded;
}

/* Radio Button */
.radio-standard {
  @apply h-4 w-4 text-purple-600;
  @apply focus:ring-purple-500 border-gray-300;
}

/* ============================================
   CARDS
   ============================================ */

/* Standard Card */
.card-standard {
  @apply bg-white rounded-2xl shadow-lg;
  @apply p-6 md:p-8;
  @apply hover:shadow-xl transition-shadow;
}

/* Glass Card */
.card-glass {
  @apply bg-white/95 backdrop-blur-lg;
  @apply rounded-2xl shadow-2xl;
  @apply p-6 md:p-8;
}

/* Flat Card */
.card-flat {
  @apply bg-white rounded-lg;
  @apply border border-gray-200;
  @apply p-6 md:p-8;
  @apply hover:border-gray-300 transition-colors;
}

/* ============================================
   MODALS
   ============================================ */

/* Modal Overlay */
.modal-overlay {
  @apply fixed inset-0 z-40;
  @apply bg-black bg-opacity-50 transition-opacity;
}

/* Modal Content */
.modal-content {
  @apply relative z-50;
  @apply bg-white rounded-2xl shadow-xl;
  @apply max-w-md w-full mx-auto;
  @apply p-6 md:p-8;
}

/* Modal Glass */
.modal-glass {
  @apply relative z-50;
  @apply bg-white/95 backdrop-blur-lg;
  @apply rounded-2xl shadow-2xl;
  @apply max-w-md w-full mx-auto;
  @apply p-6 md:p-8;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Headings */
.heading-1 {
  @apply text-2xl md:text-4xl lg:text-5xl;
  @apply font-bold text-gray-900;
  @apply leading-tight;
}

.heading-2 {
  @apply text-xl md:text-2xl lg:text-3xl;
  @apply font-bold text-gray-900;
  @apply leading-snug;
}

.heading-3 {
  @apply text-lg md:text-xl lg:text-2xl;
  @apply font-semibold text-gray-900;
  @apply leading-snug;
}

.heading-4 {
  @apply text-base md:text-lg lg:text-xl;
  @apply font-semibold text-gray-900;
}

/* Body Text */
.text-body {
  @apply text-sm md:text-base;
  @apply text-gray-700 leading-relaxed;
}

.text-body-sm {
  @apply text-xs md:text-sm;
  @apply text-gray-600 leading-relaxed;
}

/* Labels */
.label-standard {
  @apply block text-sm font-medium text-gray-700;
  @apply mb-1 md:mb-2;
}

/* ============================================
   BADGES & PILLS
   ============================================ */

.badge-primary {
  @apply inline-flex items-center px-3 py-1;
  @apply bg-purple-100 text-purple-800;
  @apply rounded-full text-xs font-medium;
}

.badge-success {
  @apply inline-flex items-center px-3 py-1;
  @apply bg-green-100 text-green-800;
  @apply rounded-full text-xs font-medium;
}

.badge-warning {
  @apply inline-flex items-center px-3 py-1;
  @apply bg-amber-100 text-amber-800;
  @apply rounded-full text-xs font-medium;
}

.badge-danger {
  @apply inline-flex items-center px-3 py-1;
  @apply bg-red-100 text-red-800;
  @apply rounded-full text-xs font-medium;
}

/* ============================================
   ALERTS
   ============================================ */

.alert-success {
  @apply bg-green-50 border border-green-200 text-green-700;
  @apply px-4 py-3 rounded-lg;
  @apply text-sm md:text-base;
}

.alert-error {
  @apply bg-red-50 border border-red-200 text-red-700;
  @apply px-4 py-3 rounded-lg;
  @apply text-sm md:text-base;
}

.alert-warning {
  @apply bg-amber-50 border border-amber-200 text-amber-700;
  @apply px-4 py-3 rounded-lg;
  @apply text-sm md:text-base;
}

.alert-info {
  @apply bg-blue-50 border border-blue-200 text-blue-700;
  @apply px-4 py-3 rounded-lg;
  @apply text-sm md:text-base;
}

/* ============================================
   LOADING STATES
   ============================================ */

/* Skeleton Loader */
.skeleton {
  @apply animate-pulse bg-gray-200 rounded;
}

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

.skeleton-card {
  @apply h-32 bg-gray-200 rounded-lg animate-pulse;
}

/* Spinner */
.spinner {
  @apply animate-spin rounded-full border-b-2 border-purple-600;
  @apply h-8 w-8;
}

.spinner-sm {
  @apply animate-spin rounded-full border-b-2 border-purple-600;
  @apply h-4 w-4;
}

.spinner-lg {
  @apply animate-spin rounded-full border-b-2 border-purple-600;
  @apply h-12 w-12;
}

/* ============================================
   CONTAINERS & LAYOUT
   ============================================ */

.container-standard {
  @apply max-w-7xl mx-auto;
  @apply px-4 sm:px-6 lg:px-8;
}

.container-narrow {
  @apply max-w-4xl mx-auto;
  @apply px-4 sm:px-6 lg:px-8;
}

.section-standard {
  @apply py-12 md:py-16 lg:py-20;
}

.section-compact {
  @apply py-8 md:py-12 lg:py-16;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}

/* Slide Up */
@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideUp {
  animation: slideUp 0.3s ease-out;
}

/* Slide Down */
@keyframes slideDown {
  from { 
    opacity: 0;
    transform: translateY(-20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideDown {
  animation: slideDown 0.3s ease-out;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Focus States */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500;
}

/* Hover Effects */
.hover-scale {
  @apply transition-transform transform hover:scale-[1.02];
}

.hover-shadow {
  @apply transition-shadow hover:shadow-xl;
}

/* Gradient Backgrounds */
.gradient-primary {
  @apply bg-gradient-to-r from-purple-600 to-pink-600;
}

.gradient-hero {
  @apply bg-gradient-to-br from-purple-600 via-pink-500 to-orange-400;
}

/* Glass Effects */
.glass-effect {
  @apply bg-white/95 backdrop-blur-lg;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Mobile Only */
@media (max-width: 767px) {
  .mobile-only {
    display: block !important;
  }
  .desktop-only {
    display: none !important;
  }
}

/* Desktop Only */
@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
  .desktop-only {
    display: block !important;
  }
}

/* Touch-Friendly Targets */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* ============================================
   Z-INDEX HIERARCHY
   ============================================ */

.z-dropdown { z-index: 30; }
.z-overlay { z-index: 40; }
.z-modal { z-index: 50; }
.z-notification { z-index: 60; }
.z-tooltip { z-index: 70; }