:root {
  --color-primary: #4f46e5;
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;

  --color-secondary: #10b981;
  --color-secondary-50: #ecfdf5;
  --color-secondary-100: #d1fae5;
  --color-secondary-200: #a7f3d0;
  --color-secondary-300: #6ee7b7;
  --color-secondary-400: #34d399;
  --color-secondary-500: #10b981;
  --color-secondary-600: #059669;
  --color-secondary-700: #047857;
  --color-secondary-800: #065f46;
  --color-secondary-900: #064e3b;
}

.bg-primary {
  background-color: var(--color-primary-600) !important;
}

.bg-primary-50 {
  background-color: var(--color-primary-50) !important;
}

.bg-primary-100 {
  background-color: var(--color-primary-100) !important;
}

.bg-primary-200 {
  background-color: var(--color-primary-200) !important;
}

.bg-primary-300 {
  background-color: var(--color-primary-300) !important;
}

.bg-primary-400 {
  background-color: var(--color-primary-400) !important;
}

.bg-primary-500 {
  background-color: var(--color-primary-500) !important;
}

.bg-primary-600 {
  background-color: var(--color-primary-600) !important;
}

.bg-primary-700 {
  background-color: var(--color-primary-700) !important;
}

.bg-primary-800 {
  background-color: var(--color-primary-800) !important;
}

.bg-primary-900 {
  background-color: var(--color-primary-900) !important;
}

.text-primary-600 {
  color: var(--color-primary-600) !important;
}

.text-primary-700 {
  color: var(--color-primary-700) !important;
}

.text-primary-800 {
  color: var(--color-primary-800) !important;
}

.hover\:bg-primary-50:hover {
  background-color: var(--color-primary-50) !important;
}

.hover\:bg-primary-700:hover {
  background-color: var(--color-primary-700) !important;
}

.hover\:text-primary-600:hover {
  color: var(--color-primary-600) !important;
}

.hover\:text-primary-700:hover {
  color: var(--color-primary-700) !important;
}

.border-primary-200 {
  border-color: var(--color-primary-200) !important;
}

.border-primary-300 {
  border-color: var(--color-primary-300) !important;
}

.border-primary-600 {
  border-color: var(--color-primary-600) !important;
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: var(--color-primary-500) !important;
}

.focus\:border-primary-500:focus {
  border-color: var(--color-primary-500) !important;
}

.bg-secondary-100 {
  background-color: var(--color-secondary-100) !important;
}

.text-secondary-800 {
  color: var(--color-secondary-800) !important;
}

.hover\:bg-secondary-700:hover {
  background-color: var(--color-secondary-700) !important;
}