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

@theme inline {
  --color-canvas: var(--canvas);
  --color-panel: var(--panel);
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-line: var(--line);
  --color-accent: var(--accent);
  --color-signal: var(--signal);
  --color-shadow: var(--shadow);
  --font-display: "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

:root {
  --canvas: #d9d1bb;
  --panel: #eee8d8;
  --ink: #171916;
  --muted: #57594f;
  --line: #9e9a88;
  --accent: #a32f1b;
  --signal: #b5d452;
  --shadow: #262a23;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-200%);
  background: var(--ink);
  color: var(--panel);
  padding: 0.75rem 1rem;
  font-weight: 700;
}

.skip-link:focus {
  transform: translateY(0);
}

svg a:hover .map-marker,
svg a:focus .map-marker {
  stroke: var(--ink);
  stroke-width: 6px;
}

.map-marker-tooltip {
  opacity: 0;
}

.map-marker-link:hover .map-marker-tooltip,
.map-marker-link:focus .map-marker-tooltip {
  opacity: 1;
}

.map-user-cluster {
  display: grid !important;
  place-items: center;
  border: 3px solid var(--panel);
  border-radius: 999px;
  background: var(--accent);
  color: var(--panel);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--ink);
}

::selection {
  background: var(--accent);
  color: var(--panel);
}

.terrain {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(90deg, transparent 31px, rgba(23, 25, 22, 0.13) 32px),
    linear-gradient(transparent 31px, rgba(23, 25, 22, 0.13) 32px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom right, black, transparent 72%);
}

.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

.cursor {
  animation: blink 1s steps(2, jump-none) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cursor {
    animation: none;
  }
}