/* Custom Color Palette */
:root {
    --color-neutral: 255, 255, 255;
    --color-neutral-50: 255, 255, 255;
    --color-neutral-100: 255, 255, 255;
    --color-neutral-200: 231, 234, 238;
    --color-neutral-300: 186, 194, 206;
    --color-neutral-400: 142, 155, 174;
    --color-neutral-500: 100, 116, 139;
    --color-neutral-600: 83, 96, 115;
    --color-neutral-700: 66, 76, 92;
    --color-neutral-800: 49, 57, 68;
    --color-neutral-900: 32, 37, 44;
    --color-primary-50: 255, 255, 255;
    --color-primary-100: 255, 255, 255;
    --color-primary-200: 255, 250, 230;
    --color-primary-300: 255, 235, 153;
    --color-primary-400: 255, 221, 77;
    --color-primary-500: 255, 206, 0;
    --color-primary-600: 214, 173, 0;
    --color-primary-700: 173, 140, 0;
    --color-primary-800: 133, 107, 0;
    --color-primary-900: 92, 74, 0;
    --color-secondary-50: 255, 255, 255;
    --color-secondary-100: 255, 255, 255;
    --color-secondary-200: 255, 254, 254;
    --color-secondary-300: 247, 227, 185;
    --color-secondary-400: 239, 199, 117;
    --color-secondary-500: 231, 171, 48;
    --color-secondary-600: 213, 152, 25;
    --color-secondary-700: 177, 126, 21;
    --color-secondary-800: 140, 100, 16;
    --color-secondary-900: 104, 74, 12;
}

/* Override Tailwind colors with custom palette */
.bg-gray-50 { background-color: rgb(var(--color-neutral-50)) !important; }
.bg-gray-100 { background-color: rgb(var(--color-neutral-100)) !important; }
.bg-gray-200 { background-color: rgb(var(--color-neutral-200)) !important; }
.bg-gray-300 { background-color: rgb(var(--color-neutral-300)) !important; }
.bg-gray-400 { background-color: rgb(var(--color-neutral-400)) !important; }
.bg-gray-500 { background-color: rgb(var(--color-neutral-500)) !important; }
.bg-gray-600 { background-color: rgb(var(--color-neutral-600)) !important; }
.bg-gray-700 { background-color: rgb(var(--color-neutral-700)) !important; }
.bg-gray-800 { background-color: rgb(var(--color-neutral-800)) !important; }
.bg-gray-900 { background-color: rgb(var(--color-neutral-900)) !important; }

.text-gray-400 { color: rgb(var(--color-neutral-400)) !important; }
.text-gray-500 { color: rgb(var(--color-neutral-500)) !important; }
.text-gray-600 { color: rgb(var(--color-neutral-600)) !important; }
.text-gray-700 { color: rgb(var(--color-neutral-700)) !important; }
.text-gray-800 { color: rgb(var(--color-neutral-800)) !important; }
.text-gray-900 { color: rgb(var(--color-neutral-900)) !important; }

.border-gray-200 { border-color: rgb(var(--color-neutral-200)) !important; }
.border-gray-300 { border-color: rgb(var(--color-neutral-300)) !important; }
.border-gray-400 { border-color: rgb(var(--color-neutral-400)) !important; }

/* Primary colors (replacing blue) */
.bg-blue-50 { background-color: rgb(var(--color-primary-50)) !important; }
.bg-blue-100 { background-color: rgb(var(--color-primary-100)) !important; }
.bg-blue-200 { background-color: rgb(var(--color-primary-200)) !important; }
.bg-blue-500 { background-color: rgb(var(--color-primary-500)) !important; }
.bg-blue-600 { background-color: rgb(var(--color-primary-600)) !important; }
.bg-blue-700 { background-color: rgb(var(--color-primary-700)) !important; }

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

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

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

/* Secondary colors (replacing orange) */
.bg-orange-50 { background-color: rgb(var(--color-secondary-50)) !important; }
.bg-orange-100 { background-color: rgb(var(--color-secondary-100)) !important; }
.bg-orange-500 { background-color: rgb(var(--color-secondary-500)) !important; }
.bg-orange-600 { background-color: rgb(var(--color-secondary-600)) !important; }
.bg-orange-700 { background-color: rgb(var(--color-secondary-700)) !important; }

.text-orange-600 { color: rgb(var(--color-secondary-600)) !important; }
.text-orange-700 { color: rgb(var(--color-secondary-700)) !important; }

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

/* Keep green colors for specific elements (water, success states) */
.bg-green-50 { background-color: rgba(var(--color-secondary-400), 0.1) !important; }
.bg-green-100 { background-color: rgba(var(--color-secondary-400), 0.2) !important; }
.bg-green-500 { background-color: rgb(var(--color-secondary-500)) !important; }
.bg-green-600 { background-color: rgb(var(--color-secondary-600)) !important; }
.bg-green-700 { background-color: rgb(var(--color-secondary-700)) !important; }

.text-green-600 { color: rgb(var(--color-secondary-600)) !important; }
.text-green-700 { color: rgb(var(--color-secondary-700)) !important; }
.text-green-800 { color: rgb(var(--color-secondary-800)) !important; }

.border-green-200 { border-color: rgba(var(--color-secondary-400), 0.3) !important; }

.hover\:bg-green-100:hover { background-color: rgba(var(--color-secondary-400), 0.2) !important; }
.hover\:bg-green-600:hover { background-color: rgb(var(--color-secondary-600)) !important; }
.hover\:bg-green-700:hover { background-color: rgb(var(--color-secondary-700)) !important; }

/* Keep purple colors for specific elements (toilets) */
.bg-purple-50 { background-color: rgba(147, 51, 234, 0.1) !important; }
.bg-purple-100 { background-color: rgba(147, 51, 234, 0.2) !important; }
.bg-purple-500 { background-color: rgb(147, 51, 234) !important; }
.bg-purple-600 { background-color: rgb(126, 34, 206) !important; }
.bg-purple-700 { background-color: rgb(109, 40, 217) !important; }

.text-purple-600 { color: rgb(126, 34, 206) !important; }
.text-purple-700 { color: rgb(109, 40, 217) !important; }

.hover\:bg-purple-100:hover { background-color: rgba(147, 51, 234, 0.2) !important; }
.hover\:bg-purple-600:hover { background-color: rgb(126, 34, 206) !important; }
.hover\:bg-purple-700:hover { background-color: rgb(109, 40, 217) !important; }

/* Red colors for specific elements (using secondary palette) */
.bg-red-50 { background-color: rgba(var(--color-secondary-400), 0.1) !important; }
.bg-red-500 { background-color: rgb(var(--color-secondary-600)) !important; }
.bg-red-600 { background-color: rgb(var(--color-secondary-700)) !important; }
.bg-red-700 { background-color: rgb(var(--color-secondary-800)) !important; }

.text-red-600 { color: rgb(var(--color-secondary-700)) !important; }
.text-red-700 { color: rgb(var(--color-secondary-800)) !important; }
.text-red-800 { color: rgb(var(--color-secondary-900)) !important; }

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

/* Update file drop zone and custom elements */
.file-drop-zone {
    border: 2px dashed rgb(var(--color-neutral-300)) !important;
    transition: all 0.3s ease;
}

.file-drop-zone.dragover {
    border-color: rgb(var(--color-primary-600)) !important;
    background-color: rgb(var(--color-primary-50)) !important;
}

.slider-container {
    background: linear-gradient(to right, rgb(var(--color-neutral-200)) 0%, rgb(var(--color-primary-600)) 0%) !important;
}

/* Update slider styles */
.slider {
    background: rgb(var(--color-neutral-200)) !important;
}

.slider::-webkit-slider-thumb {
    background: rgb(var(--color-primary-600)) !important;
}

.slider::-moz-range-thumb {
    background: rgb(var(--color-primary-600)) !important;
}

/* Language dropdown styles */
.language-dropdown {
    background-color: rgb(var(--color-neutral-50)) !important;
    border: 1px solid rgb(var(--color-neutral-300)) !important;
}

.language-dropdown .dropdown-option {
    background-color: rgb(var(--color-neutral-50)) !important;
    color: rgb(var(--color-neutral-700)) !important;
}

.language-dropdown .dropdown-option:hover {
    background-color: rgb(var(--color-primary-100)) !important;
}

/* White background override */
.bg-white { 
    background-color: rgb(var(--color-neutral-50)) !important; 
}

/* Ensure text contrast */
body {
    color: rgb(var(--color-neutral-800)) !important;
}

/* Update shadow colors */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(var(--color-neutral-500), 0.1), 
                0 4px 6px -2px rgba(var(--color-neutral-500), 0.05) !important;
}

.shadow {
    box-shadow: 0 1px 3px 0 rgba(var(--color-neutral-500), 0.1), 
                0 1px 2px 0 rgba(var(--color-neutral-500), 0.06) !important;
}