frontend/src/index.css

@import "tailwindcss";
@plugin "daisyui";

@theme {
  --font-inter: "Inter", sans-serif;

  --color-bg-body: #ecf8fb;
  --color-bg-card: #ffffff;
  --color-bg-hover: #e0f2fe;
  --color-text-primary: #164e63;
  --color-text-secondary: #4b6b8a;
  --color-text-muted: #7c9bb4;
  --color-accent: #0891b2;
  --color-accent-hover: #06b6d4;
  --color-border: #cffafe;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

  --radius-lg: 12px;
  --radius-sm: 8px;
}

:root {
  font-family: 'Inter', sans-serif;
  --bg-hero: linear-gradient(135deg, #0369a1 0%, #0891b2 100%);
}

body {
  @apply bg-bg-body text-text-primary min-h-screen overflow-x-hidden font-inter;
  line-height: 1.6;
}

/* Mirror Match Component Styles */
.hero-section {
  background: var(--bg-hero);
  color: #fff;
}

.hero-badge {
  @apply inline-flex items-center gap-2 px-4 py-1.5 bg-white/20 rounded-full text-[0.7rem] font-semibold mb-6 backdrop-blur-md border border-white/10;
}

.hero-title {
  @apply text-5xl md:text-7xl font-[800] mb-4 tracking-tight text-white drop-shadow-lg;
}

.hero-subtitle {
  @apply text-lg md:text-xl text-white/80 max-w-2xl mx-auto mb-10 font-medium leading-relaxed;
}

.search-container {
  @apply w-full max-w-xl mx-auto relative;
}

.search-input-wrapper {
  @apply flex bg-white rounded-xl shadow-2xl overflow-hidden focus-within:ring-4 focus-within:ring-white/20 transition-all border border-transparent;
}

.search-btn-accent {
  @apply bg-[#0891b2] hover:bg-[#06b6d4] px-6 text-white transition-all flex items-center justify-center;
}

/* Method Badges */
.method-badge {
  @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[0.78rem] font-[700] uppercase tracking-wider shadow-sm border border-black/5;
}

.method-badge-hybrid {
  @apply bg-[#fef3c7] text-[#92400e];
}

.method-badge-collaborative {
  @apply bg-[#e0e7ff] text-[#3730a3];
}

.method-badge-content {
  @apply bg-[#d1fae5] text-[#065f46];
}

/* Animations */
.animate-in {
  animation: fadeInDown 0.6s ease-out forwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom styles for matching the original UI */
.bg-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%);
}

.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 50%;
  pointer-events: none;
  animation: float 20s infinite linear;
}

@keyframes float {
  from {
    transform: translateY(100vh) translateX(0);
  }

  to {
    transform: translateY(-100px) translateX(100px);
  }
}

/* Glassmorphism utility */
.glass-panel {
  @apply bg-white/5 backdrop-blur-lg border border-white/10 shadow-xl;
}

.hero-gradient {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

/* BookCard Hover Fix - Scale Only, No Layout Shift */
.book-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  transform-origin: center;
}

.book-card:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 20;
}

/* Ensure buttons are always visible */
.book-card-actions {
  min-height: 44px;
  /* Touch-friendly minimum */
}

.book-card-actions button {
  min-width: fit-content;
  flex: 1 1 auto;
}

/* Responsive helper */
@media (max-width: 640px) {
  .book-card-actions button {
    font-size: 0.65rem;
    padding: 0.4rem 0.5rem;
  }
}