refactor(core): use Capacitor safe-area CSS variables on older WebViews (#30866)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The safe area variables are only reliant on `env` variables that are
provided by devices.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Capacitor 8 has released [safe area variable
fallbacks](https://capacitorjs.com/docs/apis/system-bars#android-note)
to provide consistent behaviors with older Android devices:

> Due to a [bug](https://issues.chromium.org/issues/40699457) in some
older versions of Android WebView (< 140), correct safe area values are
not available via the safe-area-inset-x CSS env variables. This plugin
will inject the correct inset values into a new CSS variable(s) named
--safe-area-inset-x that you can use as a fallback in your frontend
styles.

- Updated safe area variables to use the fallbacks provided by
Capacitor.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Changes to the [core
file](https://github.com/ionic-team/ionic-framework/blob/2ee52d77c86ef29756370f1ed732998589ca2fd8/core/src/css/core.scss#L253-L260)
will be done on `main`.

---------

Co-authored-by: Brandy Smith <[email protected]>
Co-authored-by: ionitron <[email protected]>

Author: 3 people

core/src/components/app/test/safe-area/app.e2e.ts

@@ -5,7 +5,7 @@ import type { E2EPage } from '@utils/test/playwright';
 /**
  * Safe area tests only check top and bottom edges. RTL checks are not required here.
  */
-configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ config, title, screenshot }) => {
   test.describe(title('app: safe-area'), () => {
     const testOverlay = async (page: E2EPage, trigger: string, event: string, screenshotModifier: string) => {
       const presentEvent = await page.spyOnEvent(event);