@import "tailwindcss";

@theme {
  /* Primary Green Colors */
  --color-primary-1-50: #eff5f1;
  --color-primary-1-100: #b4f7c5;
  --color-primary-1-200: #81f19d;
  --color-primary-1-300: #4deb75;
  --color-primary-1-400: #19e64d;
  --color-primary-1-500: #14b23b;
  --color-primary-1-600: #0e7e2a;
  --color-primary-1-700: #084b19;
  --color-primary-1-800: #031708;

  /* Primary Purple Colors */
  --color-primary-2-50: #f1eff5;
  --color-primary-2-100: #c5b4f7;
  --color-primary-2-200: #9d81f1;
  --color-primary-2-300: #754deb;
  --color-primary-2-400: #4d19e6;
  --color-primary-2-500: #3b14b2;
  --color-primary-2-600: #2a0e7e;
  --color-primary-2-700: #19084b;
  --color-primary-2-800: #080317;

  /* Primary Orange Colors */
  --color-primary-3-50: #f5f1ef;
  --color-primary-3-100: #f7c5b4;
  --color-primary-3-200: #f19d81;
  --color-primary-3-300: #eb754d;
  --color-primary-3-400: #e64d19;
  --color-primary-3-500: #b23b14;
  --color-primary-3-600: #7e2a0e;
  --color-primary-3-700: #4b1908;
  --color-primary-3-800: #170803;
}

/* Sortable.js drag and drop states */
.sortable-ghost {
  opacity: 0.4;
}

.sortable-chosen {
  cursor: grabbing !important;
}

.sortable-drag {
  opacity: 1;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: rotate(2deg);
}

.sortable-fallback {
  opacity: 1 !important;
}