/* Tailwind-like Utility Classes */
:root {
  /* Primary color palette */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;
}

/* BG Classes */
.bg-primary-600\/80 {
  background-color: rgba(37, 99, 235, 0.8); /* primary-600 with 80% opacity */
}

.bg-white {
  background-color: #ffffff;
}

.bg-white\/50 {
  background-color: rgba(255, 255, 255, 0.5);
}

.bg-slate-50 {
  background-color: #f8fafc;
}

.bg-gradient-to-br {
  background-image: linear-gradient(
    to bottom right,
    var(--tw-gradient-from, transparent),
    var(--tw-gradient-to, transparent)
  );
}

.from-slate-50 {
  --tw-gradient-from: #f8fafc;
}

.to-slate-200 {
  --tw-gradient-to: #e2e8f0;
}

/* Text Colors */
.text-transparent {
  color: transparent;
}

.text-white {
  color: white;
}

/* Background Clip */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Gradients */
.bg-gradient-to-r {
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-from, transparent),
    var(--tw-gradient-to, transparent)
  );
}

.from-blue-600 {
  --tw-gradient-from: #2563eb;
}

.to-indigo-800 {
  --tw-gradient-to: #3730a3;
}

.to-indigo-700 {
  --tw-gradient-to: #4338ca;
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6;
}

.to-blue-700 {
  --tw-gradient-to: #1d4ed8;
}

.from-emerald-500 {
  --tw-gradient-from: #10b981;
}

.to-emerald-700 {
  --tw-gradient-to: #047857;
}

.from-blue-300 {
  --tw-gradient-from: #93c5fd;
}

.to-indigo-600 {
  --tw-gradient-to: #4f46e5;
}

.from-slate-50 {
  --tw-gradient-from: #f8fafc;
}

.to-slate-200 {
  --tw-gradient-to: #e2e8f0;
}

/* Button specific fixes */
label[for="fileInput"] {
  background-image: linear-gradient(to right, #2563eb, #4338ca);
}

/* Animation for progress bar */
@keyframes progress-animation {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}