fake: vibrant color schema

[maxy-shpfy]

DO NOT MERGE - THIS IS PR TO TEST TOPHATTING

Description

Replaced hardcoded color classes with semantic CSS custom properties for header and footer components. The header now uses bg-header and text-header-foreground instead of bg-stone-900 and text-white, while the footer uses bg-footer and text-footer-foreground instead of bg-gray-50. Updated button styling in the header to use semantic color tokens with proper hover states. Added corresponding CSS custom properties for both light and dark themes with purple-tinted color schemes.

Related Issue and Pull requests

Type of Change

• Bug fix
• New feature
• Improvement
• Cleanup/Refactor
• Breaking change
• Documentation update

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

1. Verify the header displays with the new purple-tinted dark background
2. Check that header text and buttons are properly visible with the new color scheme
3. Confirm the footer uses the new light background color
4. Test both light and dark theme modes to ensure proper color application
5. Verify hover states work correctly on header buttons

Additional Comments

This change improves theme consistency by moving away from hardcoded Tailwind color classes to a semantic token system, making future theme updates easier to maintain.

[maxy-shpfy]

• poc: consolidated settings page #1847
• fake: vibrant color schema #1846 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.