DP-39213: Complete mayflower transition to css variables

[Ethansev]

Description

This PR completes the CSS variables transition started in DP-38077 by removing all SCSS color functions and introducing a modern CSS Grid system. It adds pre-calculated CSS variables for transparency and gradients to eliminate rgba() usage, and provides new grid mixins to replace the deprecated span-columns system.

Related Issue / Ticket

• JIRA issue

Steps to Test

1. Run rushx build in the assets package to ensure SCSS compiles without errors
2. Run rushx stylelint to verify all SCSS follows coding standards
3. Run BackstopJS tests to confirm no visual regressions
4. Verify grid layouts still work correctly
5. Start react and patternlab apps to compare with production

Additional Notes:

• All SCSS color functions (rgba, mix) have been replaced with CSS variables
• New grid mixins provide better developer experience with validation and warnings
• Fully backward compatible - existing layouts mostly unchanged, but there are some minor shifts occurring
• Some production regressions have been automatically fixed due to the new grid system such as the Featured Topics section in the Organization Elected Official page

Impacted Areas in Application

• All components using rgba() colors now use pre-calculated CSS variables
• Components using span-columns can now migrate to new ma-grid mixins
• This PR impacts the majority of the application

@todo

• Monitor potential regressions from the rgba changes due to the new defined colors
• Potential adjustments may be needed for responsive layouts due to the new grid system

Today I learned...

• BackstopJS 4.5.0 uses an older Chromium that doesn't support modern CSS features like color-mix()
• Some of our packages and documentation are outdated