/* ASC Scribe Colors */
:root {
  --light-bg: #f8f9fa;
  --dark-bg: #121212;
  --dark-card: #1e1e1e;
}

/* Tailwind CSS Custom Colors */
.bg-light {
  background-color: var(--light-bg);
}

.bg-dark {
  background-color: var(--dark-bg);
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Focus styles */
*:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Transitions */
.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Dark mode styles */
.dark .dark\:bg-dark {
  background-color: var(--dark-bg);
}

.dark .dark\:bg-gray-800 {
  background-color: #1e1e1e;
}

.dark .dark\:bg-gray-900 {
  background-color: #111111;
}

/* Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Add this to your styles.css file */
.dark .transcription-item:hover {
  background-color: #1a202c !important; /* This is roughly equivalent to gray-900 */
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.dark .dark\:text-white {
  color: #ffffff;
}

.dark .dark\:text-gray-200 {
  color: #e5e7eb;
}

.dark .dark\:text-gray-300 {
  color: #d1d5db;
}

.dark .dark\:text-gray-400 {
  color: #9ca3af;
}

/* Focus states for dark mode */
.dark *:focus-visible {
  outline-color: #ffffff;
}

/* Border colors for dark mode */
.dark .dark\:border-gray-800 {
  border-color: #1f2937;
}

.dark .dark\:border-gray-700 {
  border-color: #374151;
}

.dark .dark\:border-gray-600 {
  border-color: #4b5563;
}

.dark .dark\:border-white {
  border-color: #ffffff;
}

/* Card hover effects */
.hover\:scale-\[1\.01\]:hover {
  transform: scale(1.01);
}

.hover\:scale-\[1\.02\]:hover {
  transform: scale(1.02);
}
body, h1, h2, h3, p, div, span, a, button {
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Add this to your styles.css file */
.dark button.action-btn {
  color: white !important;
}

.light button.action-btn {
  color: black !important;
}