/* === Satoshi (OTF) === */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* make Bootstrap & your app use it */
:root {
  --font-sans: "Satoshi", "Noto Sans", Inter, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--font-sans);
}

.leaflet-container,
.leaflet-container .leaflet-control,
.leaflet-container .leaflet-popup-content,
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-tooltip {
  font-family: var(--font-sans);
  font-size: 0.9rem; /* optional, matches your UI better */
}

/* our SVG rulers in the map overlay */
.deg-rulers text {
  font-family: var(--font-sans);
}