:root {
  --background: 210, 40%, 98%;
  --foreground: 222, 47%, 11%;
  --primary: 215, 78%, 28%;
  --primary-foreground: 0, 0%, 100%;
  --secondary: 28, 92%, 54%;
  --secondary-foreground: 0, 0%, 100%;
  --muted: 210, 40%, 96.1%;
  --muted-foreground: 215.4, 16.3%, 46.9%;
  --accent: 210, 40%, 96.1%;
  --border: 214.3, 31.8%, 91.4%;
  --input: 214.3, 31.8%, 91.4%;
  --ring: 215, 78%, 28%;
  --radius: 0.75rem;
}

.dark {
  --background: 222.2, 84%, 4.9%;
  --foreground: 210, 40%, 98%;
  --primary: 217.2, 91.2%, 59.8%;
  --primary-foreground: 222.2, 47.4%, 11.2%;
  --muted: 223, 47%, 11%;
  --muted-foreground: 215, 20.2%, 65.1%;
  --border: 217.2, 32.6%, 17.5%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsla(var(--primary), 0.1);
}

.card-shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

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

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