@import "tailwindcss";

@theme {
  --color-brand: #10b981; /* Emerald 500 */
  --color-bg: #0a0a0c;
  --color-surface: #16161a;
  --color-surface-hover: #1f1f24;
}

@layer base {
  body {
    @apply bg-bg text-white selection:bg-brand selection:text-black;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
}

@layer components {
  .nav-link {
    @apply text-gray-400 hover:text-brand transition-all font-medium px-3 py-2 rounded-lg relative;
  }
  .nav-link.active {
    @apply text-brand bg-brand/10;
  }
  .nav-link.active::after {
    content: '';
    @apply absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 bg-brand rounded-full;
  }
  
  .btn-primary {
    @apply bg-brand text-black font-bold px-6 py-3 rounded-xl hover:bg-white transition-all active:scale-95 shadow-lg shadow-brand/20;
  }
  
  .section-title {
    @apply text-3xl md:text-5xl font-black mb-8 flex items-center gap-4;
  }
  .section-title::before {
    content: '';
    @apply w-2 h-10 bg-brand rounded-full;
  }

  .glass-card {
    @apply bg-surface border border-white/5 rounded-2xl p-6 hover:border-brand/30 transition-all;
  }

  .filter-btn {
    @apply px-4 py-1.5 rounded-full text-sm bg-white/5 border border-white/10 hover:border-brand/50 transition-all;
  }
  .filter-btn.active {
    @apply bg-brand text-black border-brand font-bold;
  }
}

/* Custom Animations */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  @apply bg-bg;
}
::-webkit-scrollbar-thumb {
  @apply bg-white/10 rounded-full hover:bg-brand/50 transition-colors;
}

/* Map Placeholder */
.map-placeholder {
  background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://tse-mm.bing.com/th?q=satellite+map+city+night');
  background-size: cover;
  background-position: center;
}