style.css

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

@layer base {
  html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  
  body {
    @apply antialiased;
  }
}

@layer utilities {
  /* Custom scrollbar for transcript */
  .prose::-webkit-scrollbar {
    width: 8px;
  }
  
  .prose::-webkit-scrollbar-track {
    @apply bg-slate-100 dark:bg-slate-800 rounded;
  }
  
  .prose::-webkit-scrollbar-thumb {
    @apply bg-slate-300 dark:bg-slate-600 rounded;
  }
  
  .prose::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-400 dark:bg-slate-500;
  }

  .archive-scroll::-webkit-scrollbar {
    width: 8px;
  }

  .archive-scroll::-webkit-scrollbar-track {
    @apply bg-slate-100 dark:bg-slate-800 rounded;
  }

  .archive-scroll::-webkit-scrollbar-thumb {
    @apply bg-slate-300 dark:bg-slate-600 rounded;
  }
}

/* Smooth transitions for theme toggle */
* {
  transition-property: background-color, border-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Don't transition transforms or opacity to avoid jank */
*:where([class*="transform"], [class*="translate"], [class*="scale"], [class*="rotate"], [class*="opacity"]) {
  transition-property: transform, opacity;
}