@import 'leaflet/dist/leaflet.css';
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

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

@layer base {
  :root {
    --background: #F8F7F4;
    --foreground: #000000;
    --surface: #FFFFFF;
    --surface-secondary: #F0EFEA;
    --surface-tertiary: #E5E4DD;
    --surface-inverse: #16181B;
    --primary: #0F172A;
    --primary-foreground: #FFFFFF;
    --secondary: #E2E8F0;
    --secondary-foreground: #000000;
    --muted: #EEEDE8;
    --muted-foreground: #000000;
    --accent: #B93812;
    --accent-foreground: #FFFFFF;
    --destructive: #B91C1C;
    --destructive-foreground: #FFFFFF;
    --border: #E2E1DA;
    --border-strong: #71717A;
    --radius: 0.625rem;
  }

  body {
    background-color: #F8F7F4;
    color: #000000;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Outfit', sans-serif;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #F0EFEA;
}

::-webkit-scrollbar-thumb {
  background: #71717A;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0F172A;
}

.leaflet-container {
  width: 100%;
  height: 100%;
  background-color: #E5E4DD;
  font-family: 'Plus Jakarta Sans', sans-serif;
  border-radius: 0.625rem;
}