/* Trail Predictor — "Trail Minimal" design system.
 *
 * Tailwind Play CDN handles 95% of styling. This file only keeps:
 *   - body baseline + font defaults
 *   - third-party overrides (Leaflet) that we can't target with utilities
 *   - a few animated transitions Tailwind can't express
 */

:root { color-scheme: light dark; }
[data-theme="dark"] { color-scheme: dark; }

html, body {
  margin: 0; padding: 0;
  background: #fafaf9; /* stone-50 */
  color: #1c1917;     /* stone-900 */
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[data-theme="dark"] html, [data-theme="dark"] body { background: #0c0a09; color: #f5f5f4; }
html[data-theme="dark"], html[data-theme="dark"] body { background: #0c0a09; color: #f5f5f4; }

/* Serif display (used via .font-serif utility) */
.font-serif { font-feature-settings: "ss01"; }

/* Leaflet map overrides */
.leaflet-container { background: #e7e5e4; font-family: inherit; }
[data-theme="dark"] .leaflet-container { background: #1c1917; }
[data-theme="dark"] .leaflet-tile { filter: brightness(0.85) contrast(1.1); }
[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(0,0,0,0.6) !important;
  color: #a8a29e !important;
}
[data-theme="dark"] .leaflet-control-attribution a { color: #34d399 !important; }

/* Disclaimer collapse animation (Tailwind can't animate max-height fluidly) */
.disclaimer-body {
  max-height: 4.8em; overflow: hidden;
  transition: max-height 0.35s ease;
}
.disclaimer-body.expanded { max-height: 2000px; }
.disclaimer-body a {
  color: #059669;            /* forest-600 */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.disclaimer-body a:hover { color: #047857; }  /* forest-700 */
[data-theme="dark"] .disclaimer-body a { color: #34d399; }      /* forest-400 */
[data-theme="dark"] .disclaimer-body a:hover { color: #6ee7b7; }/* forest-300 */

/* Tooltip dropdowns toggled by JS (.open) */
.info-tip, .metric-tip { display: none; }
.info-btn.open .info-tip { display: block; }
.metric .label[data-tooltip-key]:hover .metric-tip { display: block; }

/* Hover-only border accent for feature cards */
.feature-card:hover { border-color: #10b981; }

/* Landing hero soft mountain background */
.landing-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fafaf9 0%, #f5f5f4 55%, #fafaf9 100%);
}
[data-theme="dark"] .landing-hero {
  background: linear-gradient(180deg, #0c0a09 0%, #1c1917 55%, #0c0a09 100%);
}
.landing-hero::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 390px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 190'%3E%3Cpath fill='%2310b981' fill-opacity='0.10' d='M0 190 L180 55 L340 105 L500 18 L680 88 L860 28 L1020 95 L1180 42 L1340 78 L1440 52 L1440 190Z'/%3E%3Cpath fill='%2310b981' fill-opacity='0.05' d='M0 240 L240 80 L420 130 L600 40 L780 110 L960 50 L1140 115 L1300 62 L1440 90 L1440 190Z'/%3E%3C/svg%3E");
  background-size: cover; background-position: bottom; background-repeat: no-repeat;
  pointer-events: none;
}

/* Search input inline icon */
.search-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
  padding-left: 36px;
}