[PLAY-1406] Fix zIndex Global Prop Issues in Playbook (and Nitro)

[kangaree]

What does this PR do?

• ✅ Change Fixed Toast's z-index from $z_9 to the max, $z_10.
• ✅ Use variables instead of hardcoded z-index values (and w/ responsive)
• ✅ Use important tag with z-indexes

Note: This doesn't actually fix the Fixed Toast appearing below in Nitro. For that fix, the changes must be made in Nitro: PR.

How to test? Steps to confirm the desired behavior:

1. Go to https://pr3545.playbook.beta.hq.powerapp.cloud/visual_guidelines/z_index
2. Check out the visual guide. The larger the number for the z token is, the higher the div should be.
3. Go to https://pr3545.playbook.beta.hq.powerapp.cloud/kits/fixed_confirmation_toast/react#click-to-show-positions
4. Make sure all the positions work
5. Go to https://codesandbox.io/p/sandbox/holy-grass-4pqgz7?file=%2Fsrc%2FApp.js
6. Change the width. A "md and above" div should be on top on medium devices or wider. Otherwise a "sm and below" div is on top.

Checklist:

• LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See Changelog & Labels for details.
• DEPLOY I have added the milano label to show I'm ready for a review.
• TESTS I have added test coverage to my code.

[github-actions]

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 13.33.1.pre.alpha.PLAY14063320

Your Alpha for NPM is 13.33.1-alpha.PLAY14063320