/* Main CSS Variables */
:root {
  --primary-color: #0080ff;
  --secondary-color: #e53e3e;
  --dark-blue: #1a202c;
  --light-gray: #f7fafc;
  --medium-gray: #e2e8f0;
  --text-color: #2d3748;
  --white: #ffffff;
  --border-radius: 0.375rem;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-color);
  line-height: 1.5;
}

/* Buttons */
.btn-primary {
  background-color: var(--primary-color);
  color: var(--white);
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: #0069d9;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--white);
  transition: all 0.2s ease-in-out;
}

.btn-secondary:hover {
  background-color: #c53030;
  transform: translateY(-1px);
}

/* Animation */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Card Hover Effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--light-gray);
}

::-webkit-scrollbar-thumb {
  background: var(--medium-gray);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #cbd5e0;
}