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

/* Custom Color Variables */
:root {
  /* Primary Color - Nomad Green */
  --primary-100: #e8f5e9;
  --primary-200: #c8e6c9;
  --primary-400: #66bb6a;
  --primary-600: #2e953f;
  --primary-800: #1b5e20;

  /* Secondary Color - Gold */
  --secondary-100: #fff8e1;
  --secondary-200: #ffecb3;
  --secondary-400: #ffd54f;
  --secondary-600: #ffc000;
  --secondary-800: #ff8f00;
}

/* Custom Styles */
body {
  font-family: 'Poppins', sans-serif;
}

/* Apply new color scheme */
.text-primary {
  color: var(--primary-600);
}

.bg-primary {
  background-color: var(--primary-600);
}

.border-primary {
  border-color: var(--primary-600);
}

.text-secondary {
  color: var(--secondary-600);
}

.bg-secondary {
  background-color: var(--secondary-600);
}

.border-secondary {
  border-color: var(--secondary-600);
}

.hover\:text-primary:hover {
  color: var(--primary-600);
}

.hover\:bg-primary:hover {
  background-color: var(--primary-600);
}

.hover\:text-secondary:hover {
  color: var(--secondary-600);
}

.hover\:bg-secondary:hover {
  background-color: var(--secondary-600);
}

/* Gradient utilities */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-400) 100%);
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, var(--secondary-600) 0%, var(--secondary-400) 100%);
}

/* Button variants */
.btn-primary {
  @apply bg-primary text-white font-semibold py-3 px-6 rounded-lg hover:bg-opacity-90 transition-all duration-300 shadow-md hover:shadow-lg;
}

.btn-secondary {
  @apply bg-secondary text-gray-800 font-semibold py-3 px-6 rounded-lg hover:bg-opacity-90 transition-all duration-300 shadow-md hover:shadow-lg;
}

/* Card styles */
.card-primary {
  @apply bg-white rounded-2xl shadow-xl border border-primary-200 hover:shadow-2xl transition-all duration-300;
}

.card-secondary {
  @apply bg-white rounded-2xl shadow-xl border border-secondary-200 hover:shadow-2xl transition-all duration-300;
}


/* -------------------------------------------------
   Masonry / Pinterest‑style helpers
   ------------------------------------------------- */

/* Ensure columns respect the gap defined inline */
#photoGrid {
  /* column-gap already set inline, but keep fallback */
  column-gap: 1.5rem;
}

/* Break‑inside avoidance for each card */
.photo-item {
  break-inside: avoid;
}

/* Optional: smooth fade‑in when items appear (e.g., after filtering) */
.photo-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.photo-item.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hover “lift” (already added via Tailwind, but fallback for pure CSS) */
.photo-item:hover {
  transform: translateY(-4px);
}

/* Lightbox styling – only needed if you use a lightbox library */
[data-lightbox] img {
  cursor: zoom-in;
}