/* ===========================================
   FINAL Color Override - Strict 12-Color Enforcement
   =========================================== */

/* Map ALL Tailwind color classes to our 12 core colors */

/* ============ TEXT COLORS ============ */

/* All gray text variations -> 3 text colors */
.text-gray-900, .text-gray-800, .text-gray-700,
.text-slate-900, .text-slate-800, .text-slate-700,
.text-zinc-900, .text-zinc-800, .text-zinc-700,
.text-neutral-900, .text-neutral-800, .text-neutral-700,
.text-stone-900, .text-stone-800, .text-stone-700 {
  color: var(--color-neutral-dark) !important;
}

.text-gray-600, .text-gray-500,
.text-slate-600, .text-slate-500,
.text-zinc-600, .text-zinc-500,
.text-neutral-600, .text-neutral-500,
.text-stone-600, .text-stone-500 {
  color: var(--color-text-secondary) !important;
}

.text-gray-400, .text-gray-300, .text-gray-200,
.text-slate-400, .text-slate-300, .text-slate-200,
.text-zinc-400, .text-zinc-300, .text-zinc-200,
.text-neutral-400, .text-neutral-300, .text-neutral-200,
.text-stone-400, .text-stone-300, .text-stone-200 {
  color: var(--color-text-muted) !important;
}

/* All blue text variations -> primary color */
.text-blue-900, .text-blue-800, .text-blue-700,
.text-blue-600, .text-blue-500, .text-blue-400,
.text-indigo-900, .text-indigo-800, .text-indigo-700,
.text-indigo-600, .text-indigo-500, .text-indigo-400,
.text-sky-900, .text-sky-800, .text-sky-700,
.text-sky-600, .text-sky-500, .text-sky-400 {
  color: var(--color-primary) !important;
}

/* All green text variations -> success color */
.text-green-900, .text-green-800, .text-green-700,
.text-green-600, .text-green-500, .text-green-400,
.text-emerald-900, .text-emerald-800, .text-emerald-700,
.text-emerald-600, .text-emerald-500, .text-emerald-400,
.text-teal-900, .text-teal-800, .text-teal-700,
.text-teal-600, .text-teal-500, .text-teal-400 {
  color: var(--color-success) !important;
}

/* All red text variations -> error color */
.text-red-900, .text-red-800, .text-red-700,
.text-red-600, .text-red-500, .text-red-400,
.text-rose-900, .text-rose-800, .text-rose-700,
.text-rose-600, .text-rose-500, .text-rose-400,
.text-pink-900, .text-pink-800, .text-pink-700,
.text-pink-600, .text-pink-500, .text-pink-400 {
  color: var(--color-error) !important;
}

/* All yellow/amber text -> warning color */
.text-yellow-900, .text-yellow-800, .text-yellow-700,
.text-yellow-600, .text-yellow-500, .text-yellow-400,
.text-amber-900, .text-amber-800, .text-amber-700,
.text-amber-600, .text-amber-500, .text-amber-400,
.text-orange-900, .text-orange-800, .text-orange-700,
.text-orange-600, .text-orange-500, .text-orange-400 {
  color: var(--color-warning) !important;
}

/* White text */
.text-white {
  color: var(--color-white) !important;
}

/* ============ BACKGROUND COLORS ============ */

/* White backgrounds */
.bg-white {
  background-color: var(--color-white) !important;
}

/* Light gray backgrounds -> neutral light */
.bg-gray-50, .bg-gray-100,
.bg-slate-50, .bg-slate-100,
.bg-zinc-50, .bg-zinc-100,
.bg-neutral-50, .bg-neutral-100,
.bg-stone-50, .bg-stone-100 {
  background-color: var(--color-neutral-light) !important;
}

/* Medium gray backgrounds -> slightly darker neutral */
.bg-gray-200, .bg-gray-300,
.bg-slate-200, .bg-slate-300,
.bg-zinc-200, .bg-zinc-300,
.bg-neutral-200, .bg-neutral-300,
.bg-stone-200, .bg-stone-300 {
  background-color: var(--color-neutral-light) !important;
  opacity: 0.8 !important;
}

/* Dark backgrounds -> neutral dark */
.bg-gray-900, .bg-gray-800, .bg-gray-700,
.bg-slate-900, .bg-slate-800, .bg-slate-700,
.bg-zinc-900, .bg-zinc-800, .bg-zinc-700,
.bg-neutral-900, .bg-neutral-800, .bg-neutral-700,
.bg-stone-900, .bg-stone-800, .bg-stone-700 {
  background-color: var(--color-neutral-dark) !important;
}

/* Blue backgrounds light -> primary light */
.bg-blue-50, .bg-blue-100,
.bg-indigo-50, .bg-indigo-100,
.bg-sky-50, .bg-sky-100 {
  background-color: var(--color-primary-light) !important;
}

/* Blue backgrounds dark -> primary */
.bg-blue-900, .bg-blue-800, .bg-blue-700,
.bg-blue-600, .bg-blue-500, .bg-blue-400,
.bg-indigo-900, .bg-indigo-800, .bg-indigo-700,
.bg-indigo-600, .bg-indigo-500, .bg-indigo-400,
.bg-sky-900, .bg-sky-800, .bg-sky-700,
.bg-sky-600, .bg-sky-500, .bg-sky-400 {
  background-color: var(--color-primary) !important;
}

/* Green backgrounds light -> success light */
.bg-green-50, .bg-green-100,
.bg-emerald-50, .bg-emerald-100,
.bg-teal-50, .bg-teal-100 {
  background-color: var(--color-success-light) !important;
}

/* Green backgrounds dark -> success */
.bg-green-900, .bg-green-800, .bg-green-700,
.bg-green-600, .bg-green-500, .bg-green-400,
.bg-emerald-900, .bg-emerald-800, .bg-emerald-700,
.bg-emerald-600, .bg-emerald-500, .bg-emerald-400,
.bg-teal-900, .bg-teal-800, .bg-teal-700,
.bg-teal-600, .bg-teal-500, .bg-teal-400 {
  background-color: var(--color-success) !important;
}

/* Red backgrounds light -> error light */
.bg-red-50, .bg-red-100,
.bg-rose-50, .bg-rose-100,
.bg-pink-50, .bg-pink-100 {
  background-color: var(--color-error-light) !important;
}

/* Red backgrounds dark -> error */
.bg-red-900, .bg-red-800, .bg-red-700,
.bg-red-600, .bg-red-500, .bg-red-400,
.bg-rose-900, .bg-rose-800, .bg-rose-700,
.bg-rose-600, .bg-rose-500, .bg-rose-400,
.bg-pink-900, .bg-pink-800, .bg-pink-700,
.bg-pink-600, .bg-pink-500, .bg-pink-400 {
  background-color: var(--color-error) !important;
}

/* Yellow/Orange backgrounds -> warning with opacity */
.bg-yellow-50, .bg-yellow-100,
.bg-amber-50, .bg-amber-100,
.bg-orange-50, .bg-orange-100 {
  background-color: var(--color-warning) !important;
  opacity: 0.1 !important;
}

.bg-yellow-900, .bg-yellow-800, .bg-yellow-700,
.bg-yellow-600, .bg-yellow-500, .bg-yellow-400,
.bg-amber-900, .bg-amber-800, .bg-amber-700,
.bg-amber-600, .bg-amber-500, .bg-amber-400,
.bg-orange-900, .bg-orange-800, .bg-orange-700,
.bg-orange-600, .bg-orange-500, .bg-orange-400 {
  background-color: var(--color-warning) !important;
}

/* ============ BORDER COLORS ============ */

/* All gray borders -> border color */
.border-gray-900, .border-gray-800, .border-gray-700,
.border-gray-600, .border-gray-500, .border-gray-400,
.border-gray-300, .border-gray-200, .border-gray-100,
.border-slate-900, .border-slate-800, .border-slate-700,
.border-slate-600, .border-slate-500, .border-slate-400,
.border-slate-300, .border-slate-200, .border-slate-100 {
  border-color: var(--color-border) !important;
}

/* All blue borders -> primary */
.border-blue-900, .border-blue-800, .border-blue-700,
.border-blue-600, .border-blue-500, .border-blue-400,
.border-blue-300, .border-blue-200, .border-blue-100,
.border-indigo-900, .border-indigo-800, .border-indigo-700,
.border-indigo-600, .border-indigo-500, .border-indigo-400 {
  border-color: var(--color-primary) !important;
}

/* All green borders -> success */
.border-green-900, .border-green-800, .border-green-700,
.border-green-600, .border-green-500, .border-green-400,
.border-green-300, .border-green-200, .border-green-100 {
  border-color: var(--color-success) !important;
}

/* All red borders -> error */
.border-red-900, .border-red-800, .border-red-700,
.border-red-600, .border-red-500, .border-red-400,
.border-red-300, .border-red-200, .border-red-100 {
  border-color: var(--color-error) !important;
}

/* ============ RING COLORS ============ */

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

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

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

/* ============ SPECIFIC COMPONENT OVERRIDES ============ */

/* Buttons */
.bg-primary, .btn-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.bg-primary:hover, .btn-primary:hover {
  background-color: var(--color-primary-dark) !important;
}

.bg-secondary, .btn-secondary {
  background-color: var(--color-neutral-dark) !important;
  color: var(--color-white) !important;
}

/* Forms */
input, select, textarea {
  background-color: var(--color-white) !important;
  border-color: var(--color-border) !important;
  color: var(--color-neutral-dark) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary) !important;
  outline-color: var(--color-primary) !important;
}

/* Links */
a {
  color: var(--color-primary) !important;
}

a:hover {
  color: var(--color-primary-dark) !important;
}

/* Cards */
.card, .bg-white.shadow-lg, .bg-white.rounded-lg {
  background-color: var(--color-white) !important;
  border-color: var(--color-border) !important;
}

/* Alerts */
.alert-info, .bg-blue-50.border-l-4 {
  background-color: var(--color-primary-light) !important;
  border-left-color: var(--color-primary) !important;
}

.alert-success, .bg-green-50.border-l-4 {
  background-color: var(--color-success-light) !important;
  border-left-color: var(--color-success) !important;
}

.alert-error, .bg-red-50.border-l-4 {
  background-color: var(--color-error-light) !important;
  border-left-color: var(--color-error) !important;
}

/* Loading spinners */
.loading-spinner {
  border-color: var(--color-border) !important;
  border-top-color: var(--color-primary) !important;
}

/* Navigation */
nav, .navbar {
  background-color: var(--color-white) !important;
  border-bottom-color: var(--color-border) !important;
}

/* Ensure headings use proper colors */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-neutral-dark) !important;
}

/* Paragraphs and spans */
p {
  color: var(--color-text-secondary) !important;
}

/* Labels */
label {
  color: var(--color-text-secondary) !important;
}

/* Small text */
small, .text-xs, .text-sm {
  color: var(--color-text-muted) !important;
}

/* Override any remaining colors */
[class*="text-purple"],
[class*="text-violet"],
[class*="text-fuchsia"],
[class*="text-cyan"],
[class*="text-lime"] {
  color: var(--color-primary) !important;
}

[class*="bg-purple"],
[class*="bg-violet"],
[class*="bg-fuchsia"],
[class*="bg-cyan"],
[class*="bg-lime"] {
  background-color: var(--color-primary-light) !important;
}

/* Final catch-all for any missed colors */
[style*="color:"] {
  color: var(--color-neutral-dark) !important;
}

[style*="background-color:"] {
  background-color: var(--color-white) !important;
}

/* Ensure all transitions are smooth */
* {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform !important;
  transition-duration: 200ms !important;
  transition-timing-function: ease-in-out !important;
}