body {
  font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
}
.font-roboto-mono {
  font-family: 'Roboto Mono', monospace;
}
select.template-select optgroup {
  font-family: 'Inter Tight', serif;
  font-weight: 700;
  font-style: normal;
}
select.template-select option {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-fade-in-delay {
  opacity: 0;
  animation: fadeIn 0.8s ease-out 0.3s forwards;
}

.animate-fade-in-delay-2 {
  opacity: 0;
  animation: fadeIn 0.8s ease-out 0.6s forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0);
  cursor: pointer;
}

.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}