@import "tailwindcss";

@theme {
  /* Primary Brand (Coral #FF5757) */
  --color-primary-1-50: #fff5f5;
  --color-primary-1-100: #ffe3e3;
  --color-primary-1-200: #ffc0c0;
  --color-primary-1-300: #ff9b9b;
  --color-primary-1-400: #ff6f6f;
  --color-primary-1-500: #FF5757;
  --color-primary-1-600: #e24646;
  --color-primary-1-700: #b83636;
  --color-primary-1-800: #8c2929;

  /* Secondary (Electric Blue #0a78e4) */
  --color-primary-2-50: #eaf4ff;
  --color-primary-2-100: #d4e9ff;
  --color-primary-2-200: #a8d4ff;
  --color-primary-2-300: #79bdff;
  --color-primary-2-400: #4aa2fb;
  --color-primary-2-500: #2286f2;
  --color-primary-2-600: #0a78e4;
  --color-primary-2-700: #0760b7;
  --color-primary-2-800: #054a8b;

  /* Accent (Crimson #cc012c) */
  --color-primary-3-50: #ffeaf0;
  --color-primary-3-100: #ffc9d7;
  --color-primary-3-200: #ff93af;
  --color-primary-3-300: #ff5c84;
  --color-primary-3-400: #f52c59;
  --color-primary-3-500: #cc012c;
  --color-primary-3-600: #a00122;
  --color-primary-3-700: #7a001b;
  --color-primary-3-800: #550013;

  /* Ink (Charcoal #141317) */
  --color-primary-4-50: #e9e8ea;
  --color-primary-4-100: #c8c6cb;
  --color-primary-4-200: #a5a3a9;
  --color-primary-4-300: #7f7c82;
  --color-primary-4-400: #4f4d54;
  --color-primary-4-500: #2e2b33;
  --color-primary-4-600: #141317;
  --color-primary-4-700: #0d0d10;
  --color-primary-4-800: #070709;
}


/* 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;
}