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

:root {
  --background: #ffffff;
  --foreground: #171717;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
} */

body {
  color: var(--foreground);
  background: var(--background);
}

/* Increase specificity and use !important where necessary */
.mapboxgl-popup .mapboxgl-popup-content {
  @apply rounded-xl p-4 px-5 drop-shadow-lg border border-neutral-300 max-w-xs !important;
}

/* Hide the popup tip */
.mapboxgl-popup .mapboxgl-popup-tip {
  display: none !important;
}

/* Child elements */
.mapboxgl-popup-content h3 {
  @apply text-sm font-medium text-neutral-800 !important;
}

.mapboxgl-popup-content p {
  @apply text-xs text-neutral-600  !important;
}

.mapboxgl-popup-content p + p {
  @apply text-neutral-500 !important;
}
