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

:root {
    --primary: #3b82f6; /* blue-500 */
    --secondary: #8b5cf6; /* purple-500 */
}

.dark {
    --primary: #60a5fa; /* blue-400 */
    --secondary: #a78bfa; /* purple-400 */
}

/* Workflow Step Styling */
.workflow-step {
    @apply w-full text-left px-4 py-2 rounded-lg transition;
    @apply bg-gray-100 dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500;
    @apply text-gray-700 dark:text-gray-200 font-medium;
}

.workflow-step.active {
    @apply bg-blue-500 text-white;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}