@import "tailwindcss";

/* Enable class-based dark mode for Tailwind v4 */
@variant dark (&:where(.dark, .dark *));

@layer base {
  * {
    box-sizing: border-box;
  }

  /* Every button and interactive element shows pointer cursor */
  button,
  [role="button"],
  a,
  label[for],
  select,
  summary {
    cursor: pointer;
  }

  /* Disabled elements should never show pointer */
  button:disabled,
  [role="button"]:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled {
    cursor: not-allowed;
  }

  body {
    @apply bg-gray-50 text-gray-900 antialiased;
    @apply dark:bg-gray-950 dark:text-gray-100;
  }

  :focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
    @apply dark:ring-offset-gray-950;
  }
}

@layer utilities {
  .animate-in  { animation-duration: 200ms; animation-fill-mode: both; }
  .animate-out { animation-duration: 150ms; animation-fill-mode: both; }

  .fade-in-0                { animation-name: fadeIn; }
  .fade-out-0               { animation-name: fadeOut; }
  .zoom-in-95               { animation-name: zoomIn95; }
  .zoom-out-95              { animation-name: zoomOut95; }
  .slide-in-from-right-full { animation-name: slideInFromRight; }
  .slide-out-to-right-full  { animation-name: slideOutToRight; }
}

@keyframes fadeIn         { from { opacity: 0; }                                              to { opacity: 1; } }
@keyframes fadeOut        { from { opacity: 1; }                                              to { opacity: 0; } }
@keyframes zoomIn95       { from { opacity: 0; }                                              to { opacity: 1; } }
@keyframes zoomOut95      { from { opacity: 1; }                                              to { opacity: 0; } }
@keyframes shrink         { from { width: 100%; }                                             to { width: 0%; } }
@keyframes slideInFromRight { from { transform: translateX(100%); opacity: 0; }              to { transform: translateX(0);    opacity: 1; } }
@keyframes slideOutToRight  { from { transform: translateX(0);    opacity: 1; }              to { transform: translateX(100%); opacity: 0; } }