/* BeepBeep brand theme — DARK. Pulled from the iOS app + mascot: a warm-dark
   #14131A canvas with a coral glow, grape panels/bands, coral brand accent,
   sunny highlight, ice washes; Fredoka display, IBM Plex Mono data, Indie Flower
   accents, SF body. Loaded LAST so these token overrides re-skin everything
   built on the shared CSS variables; a few component rules fix the spots where a
   token was used as light-on-dark foreground. */

@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Indie+Flower&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --coral: #e65455;
  --grape: #e65455; /* grape retired → coral */
  --sunny: #f5d547;
  --ice: #cdeff6;

  /* brand surfaces (placeholder thumbs, compose rail, odometer, story switch)
     are coral now; the masthead + nav bands are set to the page colour below */
  --asphalt: #e65455;
  --asphalt-2: #cf4849;

  /* dark surfaces */
  --paper: #1a1922;   /* inputs / inset surfaces */
  --paper-2: #1e1c25; /* cards */
  --band: #262430;    /* tracks / placeholders */

  --ink: #ece9f3;     /* primary text (light) */
  --muted: #9d98ac;
  --line: rgba(255, 255, 255, 0.1);

  --accent: #e65455;
  --accent-dark: #d13f40;
  --accent-soft: rgba(230, 84, 85, 0.16);

  --sign: #35c07f;
  --sign-soft: rgba(53, 192, 127, 0.14);
  --headlight: #f5d547;

  --radius: 20px;
  --shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-strong: 0 24px 60px -16px rgba(0, 0, 0, 0.7);

  --display: "Fredoka", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* warm-dark canvas with a coral glow + faint texture, like the site */
body {
  color: var(--ink);
  background-color: #14131a !important;
  background-image:
    radial-gradient(1200px 520px at 50% -8%, rgba(230, 84, 85, 0.12), transparent 70%),
    radial-gradient(900px 500px at 100% 0%, rgba(245, 213, 71, 0.06), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.4px) !important;
  background-size: 100% 100%, 100% 100%, 7px 7px, 30px 30px !important;
  background-attachment: fixed !important;
  font-family: var(--body);
}

/* rounded, softly-shadowed panels */
.card,
.poi-card,
.stat-tile,
.poi-modal-panel {
  box-shadow: var(--shadow);
}

/* Fredoka display headings */
.masthead h1,
.masthead .wordmark,
h1, h2, h3 {
  font-family: var(--display);
  letter-spacing: 0;
}

/* handwritten tagline accent */
.masthead .sub {
  font-family: "Indie Flower", var(--body);
  font-size: 1.15rem;
  color: var(--ice);
}

/* ---- fix the token roles that assumed light-on-dark foreground ---- */
/* the heading bands (masthead + nav) match the page background instead of grape */
.masthead { color: #efecf7; background: #14131a; }
.site-nav { background: #14131a; }
.odometer { color: #efecf7; }
.poi-story-switch button.active { color: #fff; }

/* default buttons: dark surface needs light text + a subtle border */
.btn {
  color: var(--ink);
  border-color: var(--line);
  border-radius: 14px;
}
.btn.primary { color: #fff; }
.view-switch { border-radius: 14px; }
.view-switch button { color: var(--ink); }
.view-switch button.active { color: #fff; }

/* flagged notice amber reads too dark on a dark panel */
.pm-flagged { color: #eac24a; }
.poi-modal-close { background: rgba(0, 0, 0, 0.5); }

/* Leaflet popups default to a white bubble; the popup text is now light, so make
   the bubble dark to match (keeps map pin info readable on the dark theme).
   !important because Leaflet's own CSS is injected at runtime AFTER this file and
   would otherwise win the cascade (same specificity), leaving a white bubble. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #1e1c25 !important;
  color: var(--ink) !important;
}
.leaflet-popup-content-wrapper {
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
.leaflet-popup-content { color: var(--ink); }
.leaflet-popup-content .poi-pop,
.leaflet-popup-content .poi-pop-name { color: var(--ink); }
.leaflet-popup-close-button { color: var(--muted) !important; }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--ink) !important; }