@import "tailwindcss";
@import "leaflet/dist/leaflet.css";

@theme {
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Barlow Condensed", "Source Sans 3", sans-serif;

  --color-bg: #101410;
  --color-surface: #1a221c;
  --color-surface-2: #243028;
  --color-fg: #f4f1e6;
  --color-muted: #a3aea4;
  --color-line: #314038;
  --color-signal: #d6e35a;
  --color-signal-ink: #1a2208;
}

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    line-height: 1.5;
  }

  h1, h2, h3 {
    text-wrap: balance;
  }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  :focus-visible {
    outline: 2px solid var(--color-signal);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-pulse {
    animation: none;
  }
}

.leaflet-container {
  background: var(--color-bg);
  font-family: var(--font-sans);
  height: 100%;
  width: 100%;
}

.leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) saturate(0.35);
}

.leaflet-control-attribution {
  background: rgb(16 20 16 / 0.85);
  color: var(--color-muted);
}

.leaflet-control-attribution a {
  color: var(--color-fg);
}

.leaflet-bar a {
  background: var(--color-surface);
  color: var(--color-fg);
  border-bottom-color: var(--color-line);
}

.leaflet-bar a:hover {
  background: var(--color-surface-2);
  color: var(--color-fg);
}