/* styles.css */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap");

/* Custom styles beyond Tailwind */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/* Background pattern */
.bg-dots {
  background-image: radial-gradient(circle, #e11e26 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.05;
}

/* Animation for ping effect */
@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .bg-dots {
    background-size: 24px 24px;
  }
}

/* Smooth transitions */
* {
  transition-property:
    background-color, border-color, color, fill, stroke, opacity, box-shadow,
    transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}