/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

/* Custom styles */
@layer base {
  * {
    @apply border-white/10;
  }

  body {
    @apply font-sans antialiased bg-black text-white;
    user-select: auto;
    -webkit-user-select: auto;
  }

  /* Dark gradient background for app container */
  #app {
    background: linear-gradient(135deg, #1a0b2e 0%, #0a0118 50%, #000000 100%);
    min-height: 100vh;
    user-select: auto;
    -webkit-user-select: auto;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
}

/* Additional base styles */
@layer base {
  /* Accessible focus ring */
  :focus-visible {
    outline: 2px solid theme('colors.primary.500');
    outline-offset: 2px;
  }

  /* Keyboard key styling */
  kbd {
    @apply inline-block px-2 py-1 text-xs font-mono rounded border border-white/20 bg-white/10 text-white;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
  }
}

@layer components {
  /* Button styles */
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 font-medium rounded transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply bg-gradient-to-r from-primary-500 to-secondary-500 text-white;
    @apply hover:from-primary-600 hover:to-secondary-600 focus:ring-primary-500;
    @apply shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
  }

  .btn-secondary {
    @apply bg-gradient-to-r from-secondary-500 to-primary-500 text-white;
    @apply hover:from-secondary-600 hover:to-primary-600 focus:ring-secondary-500;
    @apply shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
  }

  .btn-outline {
    @apply border-2 border-white/20 text-white hover:bg-white/10 focus:ring-pink-400;
  }

  .btn-sm {
    @apply px-4 py-2 text-sm;
  }

  .btn-lg {
    @apply px-8 py-4 text-lg;
  }

  /* Input styles - Dark theme */
  .input {
    @apply w-full px-4 py-3 border border-white/20 rounded bg-white/10 backdrop-blur-lg;
    @apply text-white placeholder-white/50;
    @apply focus:outline-none focus:ring-2 focus:ring-pink-400/50 focus:border-pink-400;
    @apply transition-all duration-200;
  }

  /* Card styles - Dark glass theme */
  .card {
    @apply bg-white/10 backdrop-blur-lg border border-white/10 rounded-lg shadow-soft p-6;
  }

  .card-hover {
    @apply card hover:bg-white/15 hover:shadow-soft-lg transition-all duration-200;
  }

  /* Search bar - Dark glass theme */
  .search-bar {
    @apply relative w-full max-w-2xl mx-auto;
  }

  .search-input {
    @apply w-full h-14 px-6 pr-12 rounded-lg border-2 border-white/20 bg-white/10 backdrop-blur-lg;
    @apply text-white placeholder-white/50;
    @apply focus:outline-none focus:border-pink-400 focus:ring-4 focus:ring-pink-400/20;
    @apply transition-all duration-200 text-lg;
  }

  /* Loading spinner */
  .spinner {
    @apply inline-block w-6 h-6 border-4 border-dark-200 border-t-primary-500 rounded-full;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* Modal */
  .modal-overlay {
    @apply fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50;
  }

  .modal-content {
    @apply bg-white/10 backdrop-blur-lg border border-white/20 rounded-lg shadow-soft-lg p-8 max-w-2xl w-full mx-4;
    @apply max-h-screen overflow-y-auto;
  }

  /* Toast notification */
  .toast {
    @apply fixed bottom-6 right-6 bg-white rounded-lg shadow-soft-lg p-4 z-50;
    @apply border-l-4 border-success-500;
    animation: slideIn 0.3s ease-out;
  }

  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Meilisearch highlighted text */
  mark {
    @apply bg-pink-400/30 text-pink-300 font-semibold px-1 rounded;
  }

  /* Utility classes */
  .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;
  }
}

/* Additional component styles (Meilisearch-like polish) */
@layer components {
  /* Badges & chips - Dark theme */
  .badge {
    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-white/10 text-white border border-white/20;
  }
  .badge-primary {
    @apply bg-gradient-to-r from-pink-400/20 to-purple-500/20 text-white border-pink-400/30;
  }
  .badge-success {
    @apply bg-success-500/20 text-success-300 border-success-400/30;
  }

  /* Glass panel - Meilisearch style */
  .glass {
    @apply bg-white/10 backdrop-blur-lg border border-white/10 shadow-soft;
  }

  .glass-card {
    @apply bg-white/5 backdrop-blur-[7px] border border-white/10 shadow-inner;
  }

  /* Section helpers */
  .section {
    @apply py-16 md:py-24;
  }
  .section-title {
    @apply text-4xl md:text-5xl font-black tracking-tight text-white;
  }

  /* Gradient accent border */
  .accent-border {
    position: relative;
  }
  .accent-border:before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, theme('colors.primary.500'), theme('colors.secondary.500'));
    filter: blur(8px);
    opacity: .3;
  }

  /* Subtle grid background */
  .bg-grid {
    background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 16px 16px;
    background-position: -1px -1px;
  }

  /* Skeleton shimmer */
  .skeleton {
    @apply relative overflow-hidden bg-white/10 rounded;
  }
  .skeleton:after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 1.25s infinite;
  }
  @keyframes shimmer {
    100% { transform: translateX(100%); }
  }
}
