:root {
  /* Base Colors */
  --background: 0 0% 100%;
  --foreground: 210 15% 10%;

  /* Tropical Primary - Sky Blue */
  --primary: 199 89% 48%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 199 89% 65%;
  --primary-dark: 199 89% 35%;

  /* Tropical Secondary - Teal */
  --secondary: 174 62% 47%;
  --secondary-foreground: 0 0% 100%;
  --secondary-light: 174 62% 65%;

  /* Tropical Accent - Coral */
  --accent: 16 84% 67%;
  --accent-foreground: 0 0% 100%;

  /* Neutral Tones */
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  
  /* Card & Surface */
  --card: 0 0% 100%;
  --card-foreground: 210 15% 10%;
  
  /* Borders & Inputs */
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 199 89% 48%;

  /* Gradients */
  --gradient-tropical: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  --gradient-sunset: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary)));
  --gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
  
  /* Shadows */
  --shadow-tropical: 0 10px 25px -5px hsl(var(--primary) / 0.2);
  --shadow-card: 0 4px 6px -1px hsl(210 15% 10% / 0.1);
  
  --radius: 0.75rem;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  scroll-behavior: smooth;
}

/* Buttons */
.btn-tropical {
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.btn-tropical:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 15px 25px -5px rgba(0,0,0,0.2);
}

.btn-outline-tropical {
  border: 2px solid white;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}
.btn-outline-tropical:hover {
  background: white;
  color: hsl(var(--primary));
}

/* Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(2rem);
  transition: all 0.7s ease-out;
}
.fade-in-up.animate {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s ease-out;
}
.fade-in-left.animate {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.8s ease-out;
}
.fade-in-right.animate {
  opacity: 1;
  transform: translateX(0);
}

/* Cards */
.tropical-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  border: 1px solid #f3f4f6;
  transition: all 0.3s ease;
}
.tropical-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
}
.tropical-card-hover:hover {
  box-shadow: 0 20px 40px -10px hsl(var(--primary) / 0.2);
}

/* Overlays */
.gradient-overlay {
  background: var(--gradient-overlay);
}
.gradient-tropical {
  background: var(--gradient-tropical);
}
.gradient-sunset {
  background: var(--gradient-sunset);
}

/* Filter Button */
.filter-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  transition: 0.3s;
}
.filter-btn.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.filter-btn:hover {
  background: #f0f9ff;
  color: hsl(var(--primary));
}

/* Gallery Overlay */
.gallery-item .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.9);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover .overlay {
  opacity: 1;
  
}