fix(theme): color contrast violations in gradient buttons and UI borders for WCAG AA compliance

[Copilot]

The theme's gradient buttons and outline button borders failed WCAG AA contrast requirements (3.01:1 and 1.72:1 respectively, needed 4.5:1 and 3:1).

Changes

Button Contrast Fixes

• Primary gradient buttons: Changed from linear-gradient(135deg, #1998ff, #ff5a02) to linear-gradient(135deg, #0073cc, #cc4400)
  • Contrast improved from 3.01:1 → 4.78:1 (passes WCAG AA)
• Outline button borders: Replaced semi-transparent borders with solid primary color variables
  • Light mode: 1.72:1 → 4.86:1
  • Dark mode: 2.84:1 → 7.35:1

Focus Indicator Enhancements

• Dark mode focus outlines now use --ifm-color-primary-light (#66b3ff) for 7.35:1 contrast
• Light mode continues using --hk-color-primary (#0073cc)

High Contrast Mode

• Stronger primary colors (#005299, #993300)
• Solid backgrounds on gradient buttons
• Increased outline width to 4px and border width to 3px

Component Updates

Updated color scheme across all component CSS modules:

• HoverkraftButton.module.css
• HoverkraftHero.module.css
• HoverkraftBrandHighlight.module.css
• HoverkraftFeatureList.module.css
• HoverkraftProjectCard.module.css
• hoverkraft.css (global styles)

Screenshots

Light Mode:

Before	After

Dark Mode:

Before	After

All text-on-background combinations now meet WCAG 2.1 Level AA standards (4.5:1 for text, 3:1 for UI components).

Original prompt

Enhance theme accessibility - for both light and dark mode improve all accessibilty aspects, including color.

USe have to use the availaibel mcp servers "playwrite" and "lighthouse"

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.