/* Custom Tailwind configuration and additional styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  --sage-50: #f8faf7;
  --sage-100: #f0f4ed;
  --sage-200: #d9e5d3;
  --sage-300: #c2d6b9;
  --sage-400: #abc79f;
  --sage-500: #9CAF88;
  --sage-600: #8a9e76;
  --sage-700: #788c64;
  --sage-800: #5d6d4f;
  --cream-50: #fefdfb;
  --cream-100: #fcf9f5;
  --cream-200: #f7f5f3;
}

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, var(--sage-50) 0%, var(--cream-100) 100%);
}

.bg-sage-50 { background-color: var(--sage-50); }
.bg-sage-100 { background-color: var(--sage-100); }
.bg-sage-200 { background-color: var(--sage-200); }
.bg-sage-300 { background-color: var(--sage-300); }
.bg-sage-400 { background-color: var(--sage-400); }
.bg-sage-500 { background-color: var(--sage-500); }
.bg-sage-600 { background-color: var(--sage-600); }
.bg-sage-700 { background-color: var(--sage-700); }
.bg-sage-800 { background-color: var(--sage-800); }

.text-sage-50 { color: var(--sage-50); }
.text-sage-100 { color: var(--sage-100); }
.text-sage-200 { color: var(--sage-200); }
.text-sage-300 { color: var(--sage-300); }
.text-sage-400 { color: var(--sage-400); }
.text-sage-500 { color: var(--sage-500); }
.text-sage-600 { color: var(--sage-600); }
.text-sage-700 { color: var(--sage-700); }
.text-sage-800 { color: var(--sage-800); }

.border-sage-200 { border-color: var(--sage-200); }
.border-sage-300 { border-color: var(--sage-300); }

.ring-sage-400 { --tw-ring-color: var(--sage-400); }

.from-sage-50 { --tw-gradient-from: var(--sage-50); }
.to-cream-100 { --tw-gradient-to: var(--cream-100); }

.bg-cream-100 { background-color: var(--cream-100); }

.hover\:bg-sage-100:hover { background-color: var(--sage-100); }
.hover\:bg-sage-200:hover { background-color: var(--sage-200); }

.hover\:text-sage-700:hover { color: var(--sage-700); }

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--sage-50);
}

::-webkit-scrollbar-thumb {
  background: var(--sage-300);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sage-400);
}

/* Masonry layout adjustments */
.columns-1 img,
.columns-2 img,
.columns-3 img,
.columns-4 img {
  width: 100%;
  height: auto;
  display: block;
}

/* Smooth animations */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Custom backdrop blur */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Loading animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Hover effects */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

/* Focus styles */
input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--sage-400);
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--sage-400);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .columns-2 {
    columns: 1;
  }
  
  .w-80 {
    width: 100%;
  }
}