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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  
  * {
    scroll-margin-top: 4rem;
  }
}

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .eka-btn {
    @apply inline-flex items-center gap-3 px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2 transform hover:scale-105 shadow-lg hover:shadow-xl;
  }
  
  .eka-btn-primary {
    @apply bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800 focus:ring-blue-500;
  }
  
  .eka-btn-secondary {
    @apply bg-white text-gray-900 border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 focus:ring-gray-500;
  }
  
  .eka-btn-outline {
    @apply border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white focus:ring-blue-500 bg-white;
  }
  
  .eka-input {
    @apply w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-lg;
  }
  
  .eka-textarea {
    @apply w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 transition-all resize-vertical text-lg;
  }
  
  .eka-select {
    @apply w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 transition-all appearance-none bg-white text-lg;
  }
  
  .eka-card {
    @apply bg-white rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-1;
  }
  
  .eka-toast {
    @apply fixed top-6 right-6 z-50 px-8 py-5 rounded-2xl text-white font-semibold min-w-96 transform translate-x-full transition-all duration-500 shadow-2xl backdrop-blur-sm;
  }
  
  .eka-toast.eka-show {
    @apply translate-x-0;
  }
  
  .eka-toast-success {
    @apply bg-gradient-to-r from-green-500 to-green-600;
  }
  
  .eka-toast-error {
    @apply bg-gradient-to-r from-red-500 to-red-600;
  }
  
  .eka-toast-info {
    @apply bg-gradient-to-r from-blue-500 to-blue-600;
  }
  
  .eka-badge {
    @apply inline-flex items-center px-4 py-2 rounded-full text-sm font-bold;
  }
  
  .eka-badge-success {
    @apply bg-gradient-to-r from-green-100 to-green-200 text-green-800;
  }
  
  .eka-badge-warning {
    @apply bg-gradient-to-r from-yellow-100 to-yellow-200 text-yellow-800;
  }
  
  .eka-badge-error {
    @apply bg-gradient-to-r from-red-100 to-red-200 text-red-800;
  }
  
  .eka-badge-info {
    @apply bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800;
  }
  
  .eka-modal {
    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm opacity-0 invisible transition-all duration-500;
  }
  
  .eka-modal.eka-active {
    @apply opacity-100 visible;
  }
  
  .eka-modal-content {
    @apply bg-white rounded-2xl p-8 max-w-lg w-full mx-6 transform scale-95 transition-all duration-500 shadow-2xl;
  }
  
  .eka-modal.eka-active .eka-modal-content {
    @apply scale-100;
  }
  
  .eka-loading {
    @apply opacity-70 pointer-events-none;
  }
  
  .eka-spinner {
    @apply inline-block w-7 h-7 border-4 border-white/30 border-t-white rounded-full animate-spin;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 0 4px 8px rgba(0,0,0,0.12);
  }
  
  .glass {
    backdrop-filter: blur(20px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .animate-fadeIn {
    animation: fadeIn 0.8s ease-out;
  }
  
  .animate-slideUp {
    animation: slideUp 0.6s ease-out;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .animation-delay-1000 {
    animation-delay: 1s;
  }
  
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  
  .animation-delay-4000 {
    animation-delay: 4s;
  }
}

@keyframes fadeIn {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(40px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .eka-toast {
    @apply left-4 right-4 min-w-0 px-6 py-4;
  }
  
  .eka-modal-content {
    @apply max-w-full mx-4 p-6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eka-btn,
  .eka-card,
  .eka-toast,
  .eka-modal {
    transition: none;
  }
  
  .animate-fadeIn,
  .animate-slideUp {
    animation: none;
  }
}