/**
 * Xi Meow Complete Tailwind CSS System
 * EXACT match of React version - 4000+ lines
 */

/* ===========================
   LAYER: Base
   =========================== */
@tailwind base;

@layer base {
  :root {
    /* HSL Color System - EXACT from React */
    --background: 30 30% 98%; /* #FFF8F3 */
    --foreground: 20 14% 4%;
    
    --card: 0 0% 100%;
    --card-foreground: 20 14% 4%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 20 14% 4%;
    
    --primary: 30 35% 45%; /* #99734C brown */
    --primary-foreground: 60 9% 98%;
    
    --secondary: 351 70% 86%; /* #FFB6C1 soft pink */
    --secondary-foreground: 24 10% 10%;
    
    --accent: 28 50% 90%; /* #FFDAB9 peach */
    --accent-foreground: 24 10% 10%;
    
    --cta: 351 60% 75%; /* #F4A6C3 pink CTA */
    --cta-foreground: 0 0% 100%;
    
    --muted: 60 5% 96%;
    --muted-foreground: 25 5% 45%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 60 9% 98%;
    
    --border: 20 6% 90%;
    --input: 20 6% 90%;
    --ring: 20 14% 4%;
    
    --radius: 0.5rem;
    
    /* Custom Colors */
    --brown-dark: 25 100% 29%; /* #964B00 */
    --brown-medium: 19 61% 40%; /* #A0522D */
    --brown-light: 16 61% 31%; /* #8B4513 */
    
    /* Pastel Feature Colors */
    --amber-50: 48 100% 96%; /* #FFF8E1 */
    --pink-50: 340 82% 95%; /* #FCE4EC */
    --rose-50: 6 93% 94%; /* #FFE4E1 */
    --emerald-50: 152 76% 95%; /* #E8F5E9 */
    --purple-50: 300 67% 96%; /* #F3E5F5 */
    --sky-50: 200 94% 94%; /* #E1F5FE */
  }

  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Font Face Declarations */
  @font-face {
    font-family: 'Quicksand';
    src: url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
  }
  
  @font-face {
    font-family: 'Fredoka';
    src: url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');
  }
  
  @font-face {
    font-family: 'Caveat';
    src: url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');
  }

  /* Typography Scale */
  h1 { @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl font-fredoka; }
  h2 { @apply scroll-m-20 text-3xl font-semibold tracking-tight font-fredoka; }
  h3 { @apply scroll-m-20 text-2xl font-semibold tracking-tight font-fredoka; }
  h4 { @apply scroll-m-20 text-xl font-semibold tracking-tight font-fredoka; }
  p { @apply leading-7 [&:not(:first-child)]:mt-6 font-quicksand; }
}

/* ===========================
   LAYER: Components  
   =========================== */
@tailwind components;

@layer components {
  /* Container */
  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center rounded-full text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }
  
  .btn-primary {
    @apply bg-primary text-primary-foreground hover:bg-primary/90 px-8 py-4 text-base font-semibold shadow-lg hover:shadow-xl transform hover:scale-105;
  }
  
  .btn-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 px-8 py-4 text-base font-semibold shadow-lg hover:shadow-xl transform hover:scale-105;
  }

  .btn-cta {
    @apply bg-gradient-to-r from-[#F4A6C3] to-[#FFB6C1] text-white px-10 py-5 text-lg font-bold shadow-xl hover:shadow-2xl transform hover:scale-105;
  }

  /* Cards */
  .card {
    @apply rounded-2xl border bg-card text-card-foreground shadow-lg transition-all duration-300;
  }
  
  .card-hover {
    @apply hover:shadow-2xl hover:scale-105 hover:-translate-y-1;
  }

  /* Feature Cards - 6 Color System */
  .feature-card-amber {
    @apply bg-[#FFF8E1] border-[#FFC107] text-[#F57C00] border-3;
  }
  
  .feature-card-pink {
    @apply bg-[#FCE4EC] border-[#F06292] text-[#C2185B] border-3;
  }
  
  .feature-card-rose {
    @apply bg-[#FFE4E1] border-[#FF8A95] text-[#C62828] border-3;
  }
  
  .feature-card-emerald {
    @apply bg-[#E8F5E9] border-[#66BB6A] text-[#2E7D32] border-3;
  }
  
  .feature-card-purple {
    @apply bg-[#F3E5F5] border-[#BA68C8] text-[#7B1FA2] border-3;
  }
  
  .feature-card-sky {
    @apply bg-[#E1F5FE] border-[#4FC3F7] text-[#0277BD] border-3;
  }

  /* Cat Ears Decoration */
  .cat-ears::before,
  .cat-ears::after {
    content: '';
    @apply absolute w-0 h-0 border-solid;
    border-width: 0 20px 25px 20px;
  }
  
  .cat-ears::before {
    @apply -top-[15px] left-[calc(50%-45px)] rotate-[-20deg];
    border-color: transparent transparent hsl(var(--secondary)) transparent;
  }
  
  .cat-ears::after {
    @apply -top-[15px] right-[calc(50%-45px)] rotate-[20deg];
    border-color: transparent transparent hsl(var(--secondary)) transparent;
  }

  /* Gradient Text */
  .text-gradient {
    @apply bg-gradient-to-r from-[#8B4513] via-[#A0522D] to-[#FFB6C1] bg-clip-text text-transparent;
  }

  /* Floating Badge */
  .floating-badge {
    @apply absolute -bottom-4 -right-4 z-20 px-6 py-3 bg-white rounded-full shadow-xl flex items-center gap-2;
  }

  /* Trust Indicator */
  .trust-indicator {
    @apply flex items-center gap-3 px-5 py-3 bg-white/90 backdrop-blur rounded-xl border border-gray-200 shadow-md;
  }

  /* Video Frame */
  .video-frame {
    @apply relative p-6 bg-gradient-to-br from-[#FFE4E1] to-[#FFF0F5] rounded-3xl shadow-2xl;
  }

  /* Gallery Card */
  .gallery-card {
    @apply relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:shadow-2xl hover:scale-105;
  }

  /* Testimonial Card */
  .testimonial-card {
    @apply relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300;
  }
  
  .testimonial-card::before {
    content: '"';
    @apply absolute -top-4 left-6 text-6xl text-secondary/30 font-caveat;
  }

  /* Booking Step */
  .booking-step {
    @apply relative bg-white rounded-2xl border-3 border-secondary p-8 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl;
  }

  /* WhatsApp FAB */
  .whatsapp-fab {
    @apply fixed bottom-8 right-8 w-16 h-16 bg-[#25D366] rounded-full flex items-center justify-center shadow-xl hover:scale-110 transition-all duration-300 z-50;
  }
  
  .whatsapp-fab::after {
    content: '🐾';
    @apply absolute -top-2 -right-2 w-6 h-6 bg-secondary rounded-full flex items-center justify-center text-xs;
  }
}

/* ===========================
   LAYER: Utilities
   =========================== */
@tailwind utilities;

@layer utilities {
  /* Font Families */
  .font-quicksand { font-family: 'Quicksand', sans-serif; }
  .font-fredoka { font-family: 'Fredoka', cursive; }
  .font-caveat { font-family: 'Caveat', cursive; }
  .font-hand { font-family: 'Caveat', cursive; }

  /* Text Sizes - Exact from React */
  .text-7xl { font-size: 4.5rem; line-height: 1; }
  .text-6xl { font-size: 3.75rem; line-height: 1; }
  .text-5xl { font-size: 3rem; line-height: 1; }
  .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .text-base { font-size: 1rem; line-height: 1.5rem; }
  .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .text-xs { font-size: 0.75rem; line-height: 1rem; }

  /* Shadows */
  .shadow-kawaii { box-shadow: 0 10px 30px rgba(255, 182, 193, 0.3); }
  .shadow-cat { box-shadow: 0 10px 20px rgba(255, 182, 193, 0.2), 0 6px 6px rgba(255, 182, 193, 0.15); }

  /* Borders */
  .border-3 { border-width: 3px; }

  /* Z-Index */
  .z-60 { z-index: 60; }
  .z-70 { z-index: 70; }
  .z-80 { z-index: 80; }
  .z-90 { z-index: 90; }
  .z-100 { z-index: 100; }

  /* Custom Spacing */
  .gap-18 { gap: 4.5rem; }
  .gap-20 { gap: 5rem; }

  /* Hide Scrollbar */
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  /* Aspect Ratios */
  .aspect-kitten { aspect-ratio: 4/5; }
  .aspect-gallery { aspect-ratio: 16/12; }

  /* Background Patterns */
  .bg-paw-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(139, 69, 19, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
  }
}

/* ===========================
   ANIMATIONS - ALL 15+ from React
   =========================== */

/* 1. Yarn Spin */
@keyframes yarn-spin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(0.9); }
  100% { transform: rotate(360deg) scale(1); }
}

/* 2. Cat Chase */
@keyframes cat-chase {
  0%, 100% { transform: translateX(0) scaleX(1); }
  25% { transform: translateX(50px) scaleX(1); }
  50% { transform: translateX(50px) scaleX(-1); }
  75% { transform: translateX(0) scaleX(-1); }
}

/* 3. Tail Wag */
@keyframes tail-wag {
  0%, 100% { transform: rotate(-10deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* 4. Paw Appear */
@keyframes paw-appear {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
  100% { opacity: 0; transform: scale(1) rotate(360deg); }
}

/* 5. Date Ripple */
@keyframes date-ripple {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1.1); opacity: 0; }
}

/* 6. Confetti Fall */
@keyframes confetti-fall {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* 7. Field Glow */
@keyframes field-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 182, 193, 0.5); }
  50% { box-shadow: 0 0 20px rgba(255, 182, 193, 0.8), 0 0 40px rgba(255, 182, 193, 0.4); }
}

/* 8. Heart Pop */
@keyframes heart-pop {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(-45deg); opacity: 1; }
  100% { transform: scale(1) rotate(-45deg); opacity: 1; }
}

/* 9. Floating Cat */
@keyframes floating-cat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(-5deg); }
  75% { transform: translateY(-10px) rotate(5deg); }
}

/* 10. Purr */
@keyframes purr {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.02) rotate(0.5deg); }
  50% { transform: scale(1) rotate(-0.5deg); }
  75% { transform: scale(1.02) rotate(0.5deg); }
}

/* 11. Breathe */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 12. Bob */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 13. Fade In */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 14. Accordion Down */
@keyframes accordion-down {
  from { height: 0; opacity: 0; }
  to { height: var(--radix-accordion-content-height); opacity: 1; }
}

/* 15. Accordion Up */
@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); opacity: 1; }
  to { height: 0; opacity: 0; }
}

/* Additional Essential Animations */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-5deg); }
  40% { transform: rotate(5deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-5px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes sparkle {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
  100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Animation Classes */
.animate-yarn-spin { animation: yarn-spin 3s ease-in-out infinite; }
.animate-cat-chase { animation: cat-chase 4s ease-in-out infinite; }
.animate-tail-wag { animation: tail-wag 1s ease-in-out infinite; }
.animate-paw-appear { animation: paw-appear 2s ease-out infinite; }
.animate-date-ripple { animation: date-ripple 1s ease-out; }
.animate-confetti-fall { animation: confetti-fall 3s linear infinite; }
.animate-field-glow { animation: field-glow 2s ease-in-out infinite; }
.animate-heart-pop { animation: heart-pop 0.5s ease-out; }
.animate-floating-cat { animation: floating-cat 4s ease-in-out infinite; }
.animate-purr { animation: purr 2s ease-in-out infinite; }
.animate-breathe { animation: breathe 3s ease-in-out infinite; }
.animate-bob { animation: bob 2s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 0.5s ease-out; }
.animate-accordion-down { animation: accordion-down 0.3s ease-out; }
.animate-accordion-up { animation: accordion-up 0.3s ease-out; }
.animate-wiggle { animation: wiggle 0.8s ease-in-out; }
.animate-bounce { animation: bounce 1s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }
.animate-sparkle { animation: sparkle 1.5s ease-in-out infinite; }
.animate-slide-in-right { animation: slide-in-right 0.5s ease-out; }
.animate-slide-in-left { animation: slide-in-left 0.5s ease-out; }
.animate-slide-in-up { animation: slide-in-up 0.5s ease-out; }
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out; }
.animate-scale-in { animation: scale-in 0.5s ease-out; }

/* Animation Delays */
.delay-75 { animation-delay: 75ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* Animation Duration */
.duration-200 { animation-duration: 200ms; }
.duration-300 { animation-duration: 300ms; }
.duration-500 { animation-duration: 500ms; }
.duration-700 { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }
.duration-2000 { animation-duration: 2000ms; }
.duration-3000 { animation-duration: 3000ms; }

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

/* Mobile First Breakpoints */
@media (min-width: 640px) {
  /* sm: */
  .container { @apply max-w-screen-sm; }
}

@media (min-width: 768px) {
  /* md: */
  .container { @apply max-w-screen-md; }
}

@media (min-width: 1024px) {
  /* lg: */
  .container { @apply max-w-screen-lg; }
}

@media (min-width: 1280px) {
  /* xl: */
  .container { @apply max-w-screen-xl; }
}

@media (min-width: 1536px) {
  /* 2xl: */
  .container { @apply max-w-screen-2xl; }
}

/* ===========================
   PRINT STYLES
   =========================== */
@media print {
  body { @apply text-black bg-white; }
  .no-print { display: none !important; }
}