/* Custom CSS to override Tailwind classes with CSS variables */

/* Background Colors */
.bg-green-50 {
  background-color: var(--color-primary-bg) !important;
}
.bg-green-100 {
  background-color: var(--color-primary-lightest) !important;
}
.bg-green-600 {
  background-color: var(--color-primary) !important;
}
.bg-green-700 {
  background-color: var(--color-primary-dark) !important;
}
.bg-slate-700 {
  background-color: var(--color-secondary-light) !important;
}
.bg-slate-800 {
  background-color: var(--color-secondary) !important;
}
.bg-slate-900 {
  background-color: var(--color-secondary-dark) !important;
}

/* Text Colors */
.text-green-600 {
  color: var(--color-primary) !important;
}
.text-green-700 {
  color: var(--color-primary-dark) !important;
}

/* Border Colors */
.border-green-200 {
  border-color: var(--color-primary-light) !important;
}
.border-green-600 {
  border-color: var(--color-primary) !important;
}
.border-slate-600 {
  border-color: var(--color-secondary) !important;
}

/* Hover Effects */
.hover\:bg-green-50:hover {
  background-color: var(--color-primary-bg) !important;
}
.hover\:bg-green-700:hover {
  background-color: var(--color-primary-dark) !important;
}
.hover\:text-green-600:hover {
  color: var(--color-primary) !important;
}
.hover\:text-green-700:hover {
  color: var(--color-primary-dark) !important;
}
.hover\:border-green-200:hover {
  border-color: var(--color-primary-light) !important;
}

/* Group Hover */
.group:hover .group-hover\:bg-green-200 {
  background-color: var(--color-primary-light) !important;
}

/* Focus Effects */
.focus\:border-green-500:focus {
  border-color: var(--color-primary) !important;
}