:root {
  --background: 42 38% 96%;
  --foreground: 218 30% 13%;
  --primary: 172 68% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 27 88% 58%;
  --secondary-foreground: 218 30% 13%;
  --muted: 42 22% 88%;
  --muted-foreground: 218 12% 43%;
  --destructive: 358 72% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 42 18% 80%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px rgba(23, 37, 42, 0.08);
  --shadow-md: 0 16px 40px rgba(23, 37, 42, 0.12);
  --shadow-lg: 0 26px 70px rgba(23, 37, 42, 0.18);
  --transition-fast: 150ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}
.dark {
  --background: 220 28% 8%;
  --foreground: 42 42% 94%;
  --primary: 170 72% 42%;
  --primary-foreground: 220 28% 8%;
  --secondary: 31 92% 62%;
  --secondary-foreground: 220 28% 8%;
  --muted: 220 22% 15%;
  --muted-foreground: 42 18% 72%;
  --destructive: 0 74% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 18% 24%;
  --card: 220 24% 11%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a, input, select, textarea { transition: var(--transition-fast); }
:focus-visible { outline: 3px solid hsl(var(--primary) / .35); outline-offset: 2px; }
.glass { background: hsl(var(--card) / .82); backdrop-filter: blur(18px); }
.hero-grid {
  background-image: radial-gradient(circle at 20% 20%, hsl(var(--primary) / .18), transparent 28%), radial-gradient(circle at 78% 12%, hsl(var(--secondary) / .20), transparent 24%), linear-gradient(hsl(var(--border) / .45) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--border) / .45) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
}
.map-pattern {
  background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--card))), repeating-linear-gradient(35deg, transparent 0 28px, hsl(var(--primary) / .08) 29px 31px), repeating-linear-gradient(-35deg, transparent 0 36px, hsl(var(--secondary) / .12) 37px 40px);
}
.pulse-pin { animation: pulsePin 1.8s infinite; }
@keyframes pulsePin { 0% { box-shadow: 0 0 0 0 hsl(var(--primary) / .45); } 70% { box-shadow: 0 0 0 14px hsl(var(--primary) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0); } }
.safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }