/* Core styles for all pages */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* Typography improvements */
.prose {
  max-width: 65ch;
  line-height: 1.75;
}

/* Code block styling */
pre {
  background: #f8fafc;
  border-radius: 0.5rem;
  padding: 1rem;
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
}

/* Enhanced card styles */
.card {
  @apply bg-white rounded-xl shadow-lg p-8 backdrop-blur-sm transition-all duration-200;
}
.card:hover {
  @apply shadow-xl;
}

/* Navigation styles */
.nav-button {
  @apply p-2.5 rounded-full hover:bg-gray-100 transition-all duration-200 active:scale-95;
}

/* Gradient text */
.gradient-text {
  @apply bg-gradient-to-r from-blue-600 to-purple-600 text-transparent bg-clip-text;
}

/* Enhanced link styles */
.enhanced-link {
  @apply text-blue-600 hover:text-blue-700 underline transition-colors duration-200;
}

/* List styles */
.feature-list {
  @apply space-y-4;
}
.feature-list-item {
  @apply flex items-start;
}
.feature-list-icon {
  @apply text-green-500 mt-1 mr-3;
}

/* Button styles */
.primary-button {
  @apply bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded transition-colors;
}
.secondary-button {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded transition-colors;
}