/* Background Colors bg-*-500 */
.bg-red-500 { background-color: #ef4444; }
.bg-green-500 { background-color: #22c55e; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-yellow-500 { background-color: #eab308; }
.bg-purple-500 { background-color: #a855f7; }
.bg-pink-500 { background-color: #ec4899; }
.bg-indigo-500 { background-color: #6366f1; }
.bg-teal-500 { background-color: #14b8a6; }
.bg-orange-500 { background-color: #f97316; }
.bg-gray-500 { background-color: #6b7280; }

/* Background Colors bg-*-700 */
.bg-red-700 { background-color: #b91c1c; }
.bg-green-700 { background-color: #15803d; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-yellow-700 { background-color: #a16207; }
.bg-purple-700 { background-color: #7e22ce; }
.bg-pink-700 { background-color: #be185d; }
.bg-indigo-700 { background-color: #4338ca; }
.bg-teal-700 { background-color: #0f766e; }
.bg-orange-700 { background-color: #c2410c; }
.bg-gray-700 { background-color: #374151; }

/* Background Colors bg-*-900 */
.bg-red-900 { background-color: #7f1d1d; }
.bg-green-900 { background-color: #14532d; }
.bg-blue-900 { background-color: #1e3a8a; }
.bg-yellow-900 { background-color: #713f12; }
.bg-purple-900 { background-color: #581c87; }
.bg-pink-900 { background-color: #831843; }
.bg-indigo-900 { background-color: #312e81; }
.bg-teal-900 { background-color: #134e4a; }
.bg-orange-900 { background-color: #7c2d12; }
.bg-gray-900 { background-color: #111827; }

/* Button Styles btn-* */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-weight: 600;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary { background-color: #3b82f6; color: #fff; }
.btn-success { background-color: #22c55e; color: #fff; }
.btn-danger { background-color: #ef4444; color: #fff; }
.btn-warning { background-color: #eab308; color: #fff; }
.btn-info { background-color: #0ea5e9; color: #fff; }
.btn-dark { background-color: #374151; color: #fff; }

/* Button Outline Styles btn-outline-* */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-outline-primary { border-color: #3b82f6; color: #3b82f6; }
.btn-outline-success { border-color: #22c55e; color: #22c55e; }
.btn-outline-danger { border-color: #ef4444; color: #ef4444; }
.btn-outline-warning { border-color: #eab308; color: #eab308; }
.btn-outline-info { border-color: #0ea5e9; color: #0ea5e9; }
.btn-outline-dark { border-color: #374151; color: #374151; }

/* Background Gradients bg-gradient-* */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-blue-500 { --tw-gradient-from: #3b82f6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59,130,246,0)); }
.from-green-500 { --tw-gradient-from: #22c55e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34,197,94,0)); }
.from-pink-500 { --tw-gradient-from: #ec4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236,72,153,0)); }
.from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168,85,247,0)); }

.to-blue-600 { --tw-gradient-to: #2563eb; }
.to-green-600 { --tw-gradient-to: #16a34a; }
.to-pink-600 { --tw-gradient-to: #db2777; }
.to-purple-600 { --tw-gradient-to: #7c3aed; }