[Bug]: Button hover states flatten palette system by using hardcoded Sass variables

[jibin7jose]

Description

The @mixin button-interactive-states in src/scss/_hds-mixins.scss is currently hardcoding the background color for hover and active states to a Sass variable ($hds-color-nasa-red-shade) instead of using the palette CSS custom property.

This flattens the palette system. If a button is placed inside an alternative palette wrapper (e.g., the Blue palette), it incorrectly turns NASA Red on hover instead of using the active palette's hover color.

Steps to Reproduce

1. Apply an alternative palette wrapper (e.g., .hds-palette-blue) to a container.
2. Place a standard button inside that container.
3. Hover over the button.
4. Actual: The button background turns NASA Red.
5. Expected: The button background should change to the hover color defined by the surrounding blue palette.

Proposed Fix

Update the interactive states in src/scss/_hds-mixins.scss to use the CSS custom property for the hover background, providing the red shade as a fallback:

@mixin button-interactive-states {
  &:hover:not(:disabled, [aria-disabled='true']),
  &:active:not(:disabled, [aria-disabled='true']) {
    background-color: var(--hds-palette-btn-primary-bg-hover, #{$hds-color-nasa-red-shade});
    text-decoration-line: none;
  }
  // ... focus styles remain unchanged
}