@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap');

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

/* ===== BASE STYLES ===== */
@layer base {
  :root {
    /* Light Mode Variables */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --border-color: #e2e8f0;
    --shadow-color: rgba(0, 0, 0, 0.08);
  }

  .dark {
    /* Dark Mode Variables */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --border-color: #334155;
    --shadow-color: rgba(0, 0, 0, 0.4);
  }

  html {
    @apply scroll-smooth;
  }

  body {
    @apply font-body antialiased transition-colors duration-300;
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }

  /* Typography Hierarchy */
  h1, h2, h3, h4, h5, h6 {
    @apply font-display font-bold tracking-tight;
  }

  /* Selection Color */
  ::selection {
    @apply bg-luxury-500 text-white;
  }

  /* Scrollbar Styling */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-slate-100 dark:bg-slate-800;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-luxury-400 rounded-full hover:bg-luxury-500 transition-colors;
  }
}

/* ===== COMPONENT CLASSES ===== */
@layer components {
  /* Glassmorphism Cards */
  .glass-card {
    @apply bg-white/70 dark:bg-slate-800/70 backdrop-blur-xl border border-white/20 dark:border-slate-700/50 shadow-glass rounded-2xl transition-all duration-300 hover:shadow-premium;
  }

  .glass-dark {
    @apply bg-slate-900/60 backdrop-blur-xl border border-slate-700/50 shadow-glass rounded-2xl;
  }

  /* Premium Buttons */
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-luxury-500 to-luxury-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl hover:scale-[1.02] transition-all duration-300 focus:ring-4 focus:ring-luxury-300/50 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-white/10 backdrop-blur-sm border border-white/20 text-white font-semibold rounded-xl hover:bg-white/20 hover:scale-[1.02] transition-all duration-300;
  }

  .btn-gold {
    @apply inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-gold-400 to-gold-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl hover:scale-[1.02] transition-all duration-300;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 border-2 border-luxury-500 text-luxury-500 dark:text-luxury-400 font-semibold rounded-xl hover:bg-luxury-500 hover:text-white transition-all duration-300;
  }

  /* Form Inputs - Modern & Clean */
  .form-input {
    @apply w-full px-4 py-3 bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm border border-slate-200 dark:border-slate-700 rounded-xl focus:ring-2 focus:ring-luxury-400 focus:border-transparent transition-all duration-300 text-slate-800 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500;
  }

  .form-label {
    @apply block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2;
  }

  /* Search Bar (Large Hero Search) */
  .search-container {
    @apply glass-card p-4 md:p-6 flex flex-col md:flex-row gap-4 items-end md:items-center;
  }

  .search-container .search-input-group {
    @apply flex-1 w-full;
  }

  .search-container .search-input-group input,
  .search-container .search-input-group select {
    @apply form-input;
  }

  .search-container .search-btn {
    @apply btn-primary w-full md:w-auto px-8 py-3 text-lg whitespace-nowrap;
  }

  /* Section Headers */
  .section-title {
    @apply text-3xl md:text-4xl lg:text-5xl font-display font-bold text-slate-900 dark:text-white;
  }

  .section-subtitle {
    @apply text-lg md:text-xl text-slate-600 dark:text-slate-400 mt-2;
  }

  .section-header {
    @apply text-center max-w-3xl mx-auto mb-12 md:mb-16;
  }

  /* Cards */
  .destination-card {
    @apply relative overflow-hidden rounded-2xl shadow-premium hover:shadow-2xl transition-all duration-500 cursor-pointer group;
  }

  .destination-card img {
    @apply w-full h-72 object-cover transition-transform duration-700 group-hover:scale-110;
  }

  .destination-card .overlay {
    @apply absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/30 to-transparent transition-opacity duration-300;
  }

  .destination-card .content {
    @apply absolute bottom-0 left-0 right-0 p-6 text-white;
  }

  .hotel-card {
    @apply glass-card overflow-hidden hover:-translate-y-2 transition-all duration-500;
  }

  .hotel-card .image-wrapper {
    @apply relative overflow-hidden h-56;
  }

  .hotel-card .image-wrapper img {
    @apply w-full h-full object-cover transition-transform duration-700 group-hover:scale-105;
  }

  .hotel-card .price-tag {
    @apply absolute top-4 right-4 bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm px-3 py-1 rounded-lg text-sm font-bold text-luxury-600 dark:text-luxury-400 shadow-lg;
  }

  /* Badges & Tags */
  .badge-premium {
    @apply inline-block px-3 py-1 text-xs font-semibold uppercase tracking-wider bg-gold-500/20 text-gold-700 dark:text-gold-400 border border-gold-500/30 rounded-full backdrop-blur-sm;
  }

  .badge-new {
    @apply inline-block px-3 py-1 text-xs font-semibold uppercase tracking-wider bg-luxury-500/20 text-luxury-700 dark:text-luxury-400 border border-luxury-500/30 rounded-full backdrop-blur-sm;
  }

  /* Star Rating */
  .stars {
    @apply flex items-center gap-0.5 text-amber-400;
  }

  .stars .star-filled {
    @apply w-4 h-4 fill-current;
  }

  .stars .star-empty {
    @apply w-4 h-4 text-slate-300 dark:text-slate-600;
  }

  /* Price Display */
  .price-amount {
    @apply text-2xl font-bold text-luxury-600 dark:text-luxury-400;
  }

  .price-original {
    @apply text-sm line-through text-slate-400 dark:text-slate-500;
  }

  /* Testimonial Card */
  .testimonial-card {
    @apply glass-card p-6 md:p-8 text-center;
  }

  .testimonial-card .avatar {
    @apply w-16 h-16 rounded-full mx-auto mb-4 object-cover border-4 border-white/20 shadow-lg;
  }

  .testimonial-card .quote-icon {
    @apply text-4xl text-gold-400/30 mb-2;
  }

  .testimonial-card .name {
    @apply font-semibold text-slate-900 dark:text-white;
  }

  .testimonial-card .role {
    @apply text-sm text-slate-500 dark:text-slate-400;
  }

  /* Footer */
  .footer-link {
    @apply text-slate-400 hover:text-white transition-colors duration-300;
  }
}

/* ===== ANIMATIONS ===== */
@layer utilities {
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-slide-up {
    animation: slideUp 0.5s ease-out;
  }

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

  .animate-pulse-slow {
    animation: pulse 3s ease-in-out infinite;
  }

  /* Gradient Text */
  .text-gradient {
    @apply bg-gradient-to-r from-luxury-400 to-gold-500 bg-clip-text text-transparent;
  }

  .text-gradient-gold {
    @apply bg-gradient-to-r from-gold-300 to-gold-600 bg-clip-text text-transparent;
  }

  /* Glassmorphism utilities */
  .backdrop-glass {
    @apply backdrop-blur-xl bg-white/10 dark:bg-black/20 border border-white/10;
  }

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

  /* Skeleton Loading */
  .skeleton {
    @apply animate-pulse bg-slate-200 dark:bg-slate-700 rounded-lg;
  }
}