@import "tailwindcss";
@import "leaflet/dist/leaflet.css";
@import "react-day-picker/style.css";

:root {
  --background: #ffffff;
  --foreground: #111827;
  --muted: #f4f5f8;
  --muted-foreground: #667085;
  --border: #e6e8ef;
  --primary: #20212b;
  --primary-foreground: #ffffff;
  --radius: 1.25rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

.rdp-root {
  --rdp-accent-color: #111827;
  --rdp-accent-background-color: #f4f5f8;
}

@layer base {
  a {
    color: inherit;
    text-decoration: none;
  }
}

button,
input {
  font: inherit;
}

.soft-card {
  border-radius: 24px;
  background: var(--muted);
}

@keyframes chat-message-blink {
  0%, 100% {
    background-color: transparent;
  }
  25%, 75% {
    background-color: rgb(51 144 236 / 18%);
  }
}

.blink-highlight {
  animation: chat-message-blink 0.55s ease-in-out 2;
  border-radius: 18px;
}

.id-shadow {
  box-shadow: 0 24px 70px rgb(22 26 43 / 12%);
}
