@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: #0f172a; /* Slate 900 */
  --secondary: #1d4ed8; /* Blue 700 */
  --accent: #dc2626; /* Red 600 */
  --metallic: #94a3b8; /* Slate 400 */
}

body {
  @apply bg-slate-50 text-slate-900 font-sans antialiased;
}

h1, h2, h3, h4 {
  @apply font-bold tracking-tight text-slate-900;
}

.gradient-dark {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.glass {
  @apply bg-white/80 backdrop-blur-md border border-white/20;
}

.btn-primary {
  @apply px-6 py-3 bg-blue-700 text-white font-semibold rounded-lg shadow-lg hover:bg-blue-800 transition-all duration-300 transform hover:-translate-y-1 active:scale-95;
}

.btn-secondary {
  @apply px-6 py-3 bg-red-600 text-white font-semibold rounded-lg shadow-lg hover:bg-red-700 transition-all duration-300 transform hover:-translate-y-1 active:scale-95;
}

.card {
  @apply bg-white p-6 rounded-xl shadow-xl border border-slate-100 hover:shadow-2xl transition-shadow duration-300;
}

.nav-link {
  @apply text-slate-300 hover:text-white transition-colors duration-200 uppercase text-xs font-bold tracking-widest;
}

/* Custom animations for precision feel */
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.animate-precision {
  animation: pulse-slow 3s infinite ease-in-out;
}