/* Custom CSS supplementing Tailwind */

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    background-color: #FAF8F3; /* Ivory */
    color: #222222; /* Charcoal */
  }

  h1, h2, h3, h4, h5, h6 {
    color: #123524; /* Deep Forest Green */
  }
}

@layer utilities {
  .glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .glass-dark {
    background: rgba(18, 53, 36, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  .text-shadow-md {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
}

/* Micro animations */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Map hover effect */
path.country {
  transition: fill 0.3s ease;
  fill: #D2D0CC;
}

path.country.active {
  fill: #C8A96A;
  cursor: pointer;
}

path.country.active:hover {
  fill: #123524;
}