/* Custom Color Overrides for Bright Coders */

/* Override Tailwind's color classes with our custom palette */
.bg-edblue { background-color: var(--color-gray-800) !important; }
.bg-edpurple { background-color: var(--color-primary-600) !important; }
.bg-edgray { background-color: var(--color-gray-600) !important; }
.bg-edoffwhite { background-color: var(--color-gray-50) !important; }

.text-edblue { color: var(--color-gray-800) !important; }
.text-edpurple { color: var(--color-primary-600) !important; }
.text-edgray { color: var(--color-gray-600) !important; }
.text-edgray2 { color: var(--color-gray-700) !important; }

.border-edblue { border-color: var(--color-gray-800) !important; }
.border-edpurple { border-color: var(--color-primary-600) !important; }
.border-edgray { border-color: var(--color-gray-600) !important; }

.fill-edblue { fill: var(--color-gray-800) !important; }
.fill-edpurple { fill: var(--color-primary-600) !important; }

/* Hover states */
.hover\:bg-edblue:hover { background-color: var(--color-gray-800) !important; }
.hover\:bg-edpurple:hover { background-color: var(--color-primary-600) !important; }
.hover\:text-edblue:hover { color: var(--color-gray-800) !important; }
.hover\:text-edpurple:hover { color: var(--color-primary-600) !important; }
.hover\:border-edpurple:hover { border-color: var(--color-primary-600) !important; }

/* Group hover states */
.group:hover .group-hover\:fill-edpurple { fill: var(--color-primary-600) !important; }
.group:hover .group-hover\:text-edpurple { color: var(--color-primary-600) !important; }

/* Additional color utilities using the new palette */
.bg-primary-50 { background-color: var(--color-primary-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-200 { background-color: var(--color-primary-200); }
.bg-primary-300 { background-color: var(--color-primary-300); }
.bg-primary-400 { background-color: var(--color-primary-400); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }
.bg-primary-950 { background-color: var(--color-primary-950); }

.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-gray-400 { background-color: var(--color-gray-400); }
.bg-gray-500 { background-color: var(--color-gray-500); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.bg-gray-700 { background-color: var(--color-gray-700); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: var(--color-gray-900); }
.bg-gray-950 { background-color: var(--color-gray-950); }

.text-primary-50 { color: var(--color-primary-50); }
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-200 { color: var(--color-primary-200); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }
.text-primary-950 { color: var(--color-primary-950); }

.text-gray-50 { color: var(--color-gray-50); }
.text-gray-100 { color: var(--color-gray-100); }
.text-gray-200 { color: var(--color-gray-200); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }
.text-gray-900 { color: var(--color-gray-900); }
.text-gray-950 { color: var(--color-gray-950); }

.border-primary-50 { border-color: var(--color-primary-50); }
.border-primary-100 { border-color: var(--color-primary-100); }
.border-primary-200 { border-color: var(--color-primary-200); }
.border-primary-300 { border-color: var(--color-primary-300); }
.border-primary-400 { border-color: var(--color-primary-400); }
.border-primary-500 { border-color: var(--color-primary-500); }
.border-primary-600 { border-color: var(--color-primary-600); }
.border-primary-700 { border-color: var(--color-primary-700); }
.border-primary-800 { border-color: var(--color-primary-800); }
.border-primary-900 { border-color: var(--color-primary-900); }
.border-primary-950 { border-color: var(--color-primary-950); }

.border-gray-50 { border-color: var(--color-gray-50); }
.border-gray-100 { border-color: var(--color-gray-100); }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }
.border-gray-400 { border-color: var(--color-gray-400); }
.border-gray-500 { border-color: var(--color-gray-500); }
.border-gray-600 { border-color: var(--color-gray-600); }
.border-gray-700 { border-color: var(--color-gray-700); }
.border-gray-800 { border-color: var(--color-gray-800); }
.border-gray-900 { border-color: var(--color-gray-900); }
.border-gray-950 { border-color: var(--color-gray-950); }

/* Hover states for new colors */
.hover\:bg-primary-50:hover { background-color: var(--color-primary-50); }
.hover\:bg-primary-100:hover { background-color: var(--color-primary-100); }
.hover\:bg-primary-200:hover { background-color: var(--color-primary-200); }
.hover\:bg-primary-300:hover { background-color: var(--color-primary-300); }
.hover\:bg-primary-400:hover { background-color: var(--color-primary-400); }
.hover\:bg-primary-500:hover { background-color: var(--color-primary-500); }
.hover\:bg-primary-600:hover { background-color: var(--color-primary-600); }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }
.hover\:bg-primary-800:hover { background-color: var(--color-primary-800); }
.hover\:bg-primary-900:hover { background-color: var(--color-primary-900); }
.hover\:bg-primary-950:hover { background-color: var(--color-primary-950); }

.hover\:text-primary-50:hover { color: var(--color-primary-50); }
.hover\:text-primary-100:hover { color: var(--color-primary-100); }
.hover\:text-primary-200:hover { color: var(--color-primary-200); }
.hover\:text-primary-300:hover { color: var(--color-primary-300); }
.hover\:text-primary-400:hover { color: var(--color-primary-400); }
.hover\:text-primary-500:hover { color: var(--color-primary-500); }
.hover\:text-primary-600:hover { color: var(--color-primary-600); }
.hover\:text-primary-700:hover { color: var(--color-primary-700); }
.hover\:text-primary-800:hover { color: var(--color-primary-800); }
.hover\:text-primary-900:hover { color: var(--color-primary-900); }
.hover\:text-primary-950:hover { color: var(--color-primary-950); }

/* Focus states */
.focus\:border-primary-500:focus { border-color: var(--color-primary-500); }
.focus\:ring-primary-500:focus { --tw-ring-color: var(--color-primary-500); }

/* Responsive design helpers */
@media (prefers-color-scheme: dark) {
  .dark\:bg-primary-800 { background-color: var(--color-primary-800); }
  .dark\:text-gray-100 { color: var(--color-gray-100); }
}