app/globals.css

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

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

/* === ALL the rest of Visionary's index.css content verbatim === */

:root {
  --font-sans: 'Space Grotesk', sans-serif;
  --font-display: 'Rajdhani', sans-serif;

  /* Deep space futuristic dark mode */
  --background: 240 10% 3%;
  --foreground: 210 40% 98%;
  
  --card: 240 10% 6%;
  --card-foreground: 210 40% 98%;
  
  --popover: 240 10% 5%;
  --popover-foreground: 210 40% 98%;
  
  /* Cyber Cyan Primary */
  --primary: 190 100% 50%;
  --primary-foreground: 240 10% 4%;
  
  /* Electric Green Secondary */
  --secondary: 150 100% 50%;
  --secondary-foreground: 240 10% 4%;
  
  --muted: 240 10% 12%;
  --muted-foreground: 240 10% 60%;
  
  --accent: 190 100% 20%;
  --accent-foreground: 190 100% 90%;
  
  --destructive: 350 100% 60%;
  --destructive-foreground: 0 0% 100%;
  
  --border: 240 10% 15%;
  --input: 240 10% 12%;
  --ring: 190 100% 50%;
  
  --radius: 0.5rem;
}

@layer base {
  body {
    @apply bg-background text-foreground antialiased selection:bg-cyan-500/30 selection:text-cyan-200;
    font-family: var(--font-sans);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    @apply tracking-wide;
  }
}

@layer utilities {
  .font-display {
    font-family: var(--font-display);
  }
  
  .font-body {
    font-family: var(--font-sans);
  }

  .neon-border {
    @apply border border-cyan-500 shadow-[0_0_15px_rgba(0,243,255,0.2),inset_0_0_10px_rgba(0,243,255,0.1)];
  }
  
  .neon-border-green {
    @apply border border-green-500 shadow-[0_0_15px_rgba(74,222,128,0.2),inset_0_0_10px_rgba(74,222,128,0.1)];
  }

  .neon-text {
    @apply text-cyan-400 drop-shadow-[0_0_8px_rgba(0,243,255,0.6)];
  }

  .glass-panel {
    @apply bg-[#0A0A0F]/80 backdrop-blur-xl border border-slate-800 shadow-2xl;
  }
}

/* === LEAFLET CUSTOMIZATIONS === */
.leaflet-container {
  background: #000000 !important;
  font-family: var(--font-sans) !important;
}

/* Hide Leaflet attribution for cleaner look */
.leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.6) !important;
  color: #4b5563 !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a {
  color: #06b6d4 !important;
}

.leaflet-popup-content-wrapper {
  background: rgba(10, 10, 15, 0.95) !important;
  border: 1px solid #00f3ff !important;
  color: #fff !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 0 25px rgba(0, 243, 255, 0.2) !important;
  border-radius: 0.5rem !important;
}

.leaflet-popup-tip {
  background: rgba(10, 10, 15, 0.95) !important;
  border: 1px solid #00f3ff !important;
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.2) !important;
}

.leaflet-popup-close-button {
  color: #00f3ff !important;
  text-shadow: 0 0 5px rgba(0,243,255,0.8);
}
.leaflet-popup-close-button:hover {
  color: #fff !important;
}