: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);
}

.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;
}

.tab-active {
  border-bottom: 2px solid var(--primary);
  color: var(--primary);
}

/* TinyMCE specific styles */
.tox.tox-tinymce {
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.tox .tox-toolbar__primary {
  background: white !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 0.5rem !important;
}

.tox .tox-edit-area {
  background: white !important;
}

.tox .tox-edit-area__iframe {
  background: white !important;
  padding: 1rem !important;
}

.tox .tox-toolbar-overlord {
  background: white !important;
}