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

@layer base {
  :root {
    --primary-color: theme('colors.primary.DEFAULT');
    --accent-color: theme('colors.accent.DEFAULT');
    --text-color: theme('colors.gray.800');
    --background-color: theme('colors.white');
    --card-background: theme('colors.white');
    --header-background: theme('colors.white');
  }

  .dark {
    --primary-color: theme('colors.primary.400');
    --accent-color: theme('colors.accent.400');
    --text-color: theme('colors.gray.200');
    --background-color: theme('colors.gray.900');
    --card-background: theme('colors.gray.800');
    --header-background: theme('colors.gray.900');
  }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-left {
    animation: slideInLeft 1s ease-out forwards;
}

.slide-in-right {
    animation: slideInRight 1s ease-out forwards;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}