:root{
    --primary-color: #000000;
    --secondary-color: #5e5e5e; 
}

/* Utility classes (optional) */
.bg-primary{ background-color: var(--primary-color) !important; }
.text-primary{ color: var(--primary-color) !important; }
.bg-secondary{ background-color: var(--secondary-color) !important; }
.text-secondary{ color: var(--secondary-color) !important; }
.bg-gray-900{background-color: var(--primary-color) !important;}
/* Override commonly used Tailwind utility colours to follow theme selections */
.bg-navy-600, .bg-navy-700, .bg-blue-600{background-color: var(--primary-color) !important;}
.text-navy-600, .text-navy-700, .text-blue-600{color: var(--primary-color) !important;}
.border-navy-600, .border-navy-700{border-color: var(--primary-color) !important;}

.bg-teal-500, .bg-teal-600, .bg-emerald-500{background-color: var(--secondary-color) !important;}
.text-teal-500, .text-teal-600{color: var(--secondary-color) !important;}
.border-teal-500, .border-teal-600{border-color: var(--secondary-color) !important;}

/* Gradient helper */
.bg-gradient-to-r.from-navy-600.to-teal-500{background-image: linear-gradient(to right, var(--secondary-color), var(--secondary-color)) !important;} 

.via-teal-500 {
    --tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #000000 var(--tw-gradient-via-position), var(--tw-gradient-to)
#334155
;
} 
.from-teal-500 {
    --tw-gradient-from: var(--secondary-color) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: var(--secondary-color) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}