You're right, the colors still aren't showing up. Let's fix this with a more direct approach using explicit hex colors instead of CSS variables.

I've completely revised the color implementation with a more direct approach:

1. Instead of using CSS variables, I'm now using explicit hex color values directly in the components
2. Each supplement now has its own color properties (color, bgColor, borderColor) stored in its object
3. The colors are applied directly to elements using inline styles

4. I've chosen more vibrant colors that should be clearly visible:

   • XYZ: Green (#00c853) with light green background
   • ABC: Red (#d32f2f) with light red background
   • DEF: Blue (#1976d2) with light blue background
   • GHK: Yellow (#ffc107) with light yellow background

This approach bypasses any issues with CSS variables and ensures that the colors are consistently applied across all components. The supplement cards, matrix headers/rows, feeding history entries, and graph lines should now all be properly color-coded.

I'll adjust the Y-axis scaling in the graph to make the curves more visible:

I've improved the Y-axis scaling in the graph to make the curves more visible:

1. Enhanced the auto-scaling logic:

   • For very small values (< 5%), the graph will zoom in to show a maximum of 10%
   • For small values (< 20%), the graph will show the maximum value plus 10%
   • For larger values, it will show the maximum value plus 20% (capped at 100%)
2. Added tickCount={6} to the Y-axis to ensure there are enough tick marks to make the scale clear

This change will make the curves much more visible by adjusting the Y-axis scale based on the actual data values rather than always showing the full 0-100% range. The graph will now automatically zoom in when the values are small, making it easier to see patterns and changes in the data.