@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

:root {
  --bg: #0A1A2F;
  --ink: #F8FAFC;
  --accent: #1E90FF;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

.animate-fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Custom styles for the reservation form */
.form-card {
  background: white;
  border-radius: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.input-field {
  @apply w-full bg-[#F8FAFC] border-[1.5px] border-[#1B3B5F]/20 rounded-xl p-3 text-sm text-[#1B3B5F] focus:outline-none focus:border-[#1E90FF] focus:ring-2 focus:ring-[#1E90FF]/10 transition-all;
}

.label-text {
  @apply block text-xs font-bold text-[#1B3B5F] uppercase tracking-wider mb-1.5;
}