/* Wava Brand Colors */
:root {
    --wava-teal: #00BFA5;
    --wava-teal-light: #26CFBC;
    --wava-teal-dark: #00A389;
    --wava-navy: #1E293B;
    --wava-navy-light: #334155;
    --wava-navy-dark: #0F172A;
}

/* Override Tailwind indigo with Wava teal */
.bg-indigo-50 { background-color: #E0F7F4 !important; }
.bg-indigo-100 { background-color: #B3EDE6 !important; }
.bg-indigo-600 { background-color: var(--wava-teal) !important; }
.bg-indigo-700 { background-color: var(--wava-teal-dark) !important; }
.bg-indigo-800 { background-color: #009479 !important; }

.text-indigo-50 { color: #E0F7F4 !important; }
.text-indigo-100 { color: #B3EDE6 !important; }
.text-indigo-200 { color: #80E2D7 !important; }
.text-indigo-600 { color: var(--wava-teal) !important; }
.text-indigo-700 { color: var(--wava-teal-dark) !important; }
.text-indigo-800 { color: #009479 !important; }

.border-indigo-500 { border-color: var(--wava-teal) !important; }
.border-indigo-600 { border-color: var(--wava-teal) !important; }
.border-indigo-700 { border-color: var(--wava-teal-dark) !important; }

.ring-indigo-500 { --tw-ring-color: var(--wava-teal) !important; }
.ring-indigo-600 { --tw-ring-color: var(--wava-teal) !important; }

.hover\:bg-indigo-50:hover { background-color: #E0F7F4 !important; }
.hover\:bg-indigo-700:hover { background-color: var(--wava-teal-dark) !important; }
.hover\:bg-indigo-800:hover { background-color: #009479 !important; }

.hover\:text-indigo-600:hover { color: var(--wava-teal) !important; }
.hover\:text-indigo-700:hover { color: var(--wava-teal-dark) !important; }
.hover\:text-indigo-800:hover { color: #009479 !important; }
.hover\:text-indigo-200:hover { color: #80E2D7 !important; }

.focus\:ring-indigo-500:focus { --tw-ring-color: var(--wava-teal) !important; }
.focus\:border-indigo-500:focus { border-color: var(--wava-teal) !important; }

/* Gradient overrides */
.from-indigo-600 { --tw-gradient-from: var(--wava-teal) !important; }
.to-purple-600 { --tw-gradient-to: var(--wava-teal-dark) !important; }
.hover\:from-indigo-700:hover { --tw-gradient-from: var(--wava-teal-dark) !important; }
.hover\:to-purple-700:hover { --tw-gradient-to: #009479 !important; }

/* Custom Wava classes */
.bg-wava-teal { background-color: var(--wava-teal); }
.bg-wava-navy { background-color: var(--wava-navy); }
.text-wava-teal { color: var(--wava-teal); }
.text-wava-navy { color: var(--wava-navy); }
.border-wava-teal { border-color: var(--wava-teal); }