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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

:root {
  --primary: #6B46C1;
  --primary-dark: #553C9A;
  --success: #3DCD58;
  --dark: #1F2937;
}

.bg-primary { background-color: var(--primary); }
.bg-primary-dark { background-color: var(--primary-dark); }
.text-primary { color: var(--primary); }
.border-primary { border-color: var(--primary); }
.hover\:bg-primary-dark:hover { background-color: var(--primary-dark); }
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:text-primary:hover { color: var(--primary); }
.focus\:ring-primary:focus { --tw-ring-color: var(--primary); }

.stepper-line {
  height: 2px;
  background-color: #E5E7EB;
}

.stepper-progress {
  height: 2px;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.stepper-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #E5E7EB;
  transition: all 0.3s ease;
}

.stepper-dot.active {
  border-color: var(--primary);
  background-color: var(--primary);
}

.module-card {
  transition: all 0.3s ease;
}

.activity-form {
  transition: all 0.3s ease;
  overflow: hidden;
}

.drag-handle {
  cursor: move;
}