feat: Reorganize CSS variables and added brand evolution colors

[brianacnguyen]

Description

This PR seeks to

• Reorganize css variables
• Added brand evolution colors based on https://www.figma.com/file/QZYDdYYy3rF2uAOYwvJ2Lx/Brand-Evo-Color-Project?type=whiteboard&node-id=13-2109&t=ekiLOAJa47PxAcDg-0

Related issues

Fixes: https://github.com/MetaMask/metamask-mobile#workspaces/design-system-61e8a2ae77c3a60012e5003c/issues/zh/569

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

• [x] I’ve followed MetaMask Coding Standards.
• [x] I've clearly explained what problem this PR is solving and how it is solved.
• [ ] I've linked related issues
• [ ] I've included manual testing steps
• [ ] I've included screenshots/recordings if applicable
• [ ] I’ve included tests if applicable
• [ ] I’ve documented my code using JSDoc format if applicable
• [ ] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
• [ ] I’ve properly set the pull request status:
  • [ ] In case it's not yet "ready for review", I've set it to "draft".
  • [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

• [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[metamaskbot]

Builds ready [7982f64]

Storybook: Storybook

[metamaskbot]

Builds ready [8c53d96]

Storybook: Storybook

[metamaskbot]

Builds ready [ab5fe82]

Storybook: Storybook

[metamaskbot]

Builds ready [e320d08]

Storybook: Storybook

[metamaskbot]

Builds ready [188ec40]

Storybook: Storybook