fix: More efficient CSS breakpoints & adjusted breakpoints to match Material specs

[Pecacheu]

• Adjust breakpoints to better align with Material guidelines
• Move breakpoints to own file to ensure central source-of-truth
• Trigger tablet breakpoint on phone max-height to catch devices with >840px width in landscape but very narrow height (eg. Galaxy S Ultra, iPhone Pro Max)
• Import breakpoints as PandaCSS conditions, enabling more efficient code than the reactive vars for pure CSS changes

How was this PR tested?

Tested new PandaCSS breakpoints system to ensure it reacts to display and orientation changes and ensure autocomplete works. In process of adapting #835 to use it where possible.

No UI/UX changes to screenshot, this is behind-the-scenes stuff.

Checklist:

• I have carefully read the contributing guidelines
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation if applicable
• I have no unrelated changes in the PR
• I have confirmed that any new dependencies are strictly necessary
• I have written tests for new code (if applicable)
• I have followed naming conventions/patterns in the surrounding code

Please declare, if any, LLM usage involved in creating this PR

Only icky squishy organic language models have been used

• main
  • fix: More efficient CSS breakpoints & adjusted breakpoints to match Material specs #1273 👈