fix(styles): restore the --ion-* tokens orphaned by the header removal

[printminion-co]

Problem

The IONOS header renders with no box-shadow.

nc-ionos-theme#67 deleted
IONOS/src/style.scss, whose entire content was a single :host { } block of IONOS design
tokens. Those tokens were not relocated anywhere. Three of them are still consumed here,
and this app is now their only consumer.

Verified against the theming stylesheet a running instance actually serves
(/index.php/apps/theming/theme/default.css?plain=1):

Token	Status	Consumed at
--ion-shadow-header	UNDEFINED	src/styles.scss — #header box-shadow
--ion-shadow	UNDEFINED	src/components/UserMenu.vue — .ion-user-menu__panel box-shadow
--ion-context-menu-title-background	UNDEFINED	src/components/UserMenu.vue — .ion-user-menu__title background

So three visible defects, not one: no header shadow, no dropdown shadow, no menu-title tint.

The old :host scope only ever applied inside the deleted component's shadow root, which is
why nothing in the light DOM ever inherited these — they were lost the moment the component
went away.

Change

Re-home the three tokens on :root in src/styles.scss, values restored from a5e6ec2.
Use sites are unchanged.

Kept here rather than in nc_theming/css/variables.css (where the sibling
--ion-context-menu-* tokens live) because this app is now the sole consumer, and keeping
it local avoids a second repo PR plus another submodule bump — nc-server#294 is already
blocked on stale cross-repo pins. Moving the block into variables.css (plus
make build_css) stays a clean follow-up if we decide --ion-* must belong to the theme.

:root is the correct scope: ThemingController::getThemeStylesheet() emits the default
theme as :root { $variables } with plain=true, so --color-shadow-header and the
--ion-color-* palette are declared on the same element — which is what var()
substitution inside a custom property requires.

Light/dark needs no extra handling: --color-shadow-header is already light-dark(...),
and the title background restores its own.

rgba(0, 0, 0, 0.12) is written as rgb(0 0 0 / 12%) to satisfy
@nextcloud/stylelint-config's modern-colour-notation rule.

Verified locally

$ npm run stylelint
⚠ 3 problems (0 errors, 3 warnings)     # all pre-existing csstools/use-logical warnings

Built chunk, as served by the running instance (HTTP 200):

--ion-shadow-header: 0 2px 8px 0 var(--color-shadow-header)
--ion-shadow: 0 4px 8px rgb(0 0 0 / 12%)
--ion-context-menu-title-background: light-dark(
	var(--ion-color-blue-b2),
	var(--ion-color-cool-grey-c7)
);

Resolution chain confirmed end to end against the live theming stylesheet:

• --color-shadow-header → light-dark(rgba(113, 128, 149, 0.5), rgba(113, 128, 149, 0.2))
• --ion-color-blue-b2 → #95caeb
• --ion-color-cool-grey-c7 → #2E4360

The other eight --ion-* tokens this app consumes were checked and were already defined;
none are touched.

Notes

• Consumer: nc-server#294 pins this app and will need re-pinning once this lands.
• Not addressed here (separate findings): the unscoped .header-start / #header rules
  that affect public share and guest layouts, and --header-height: 44px vs the actual
  height: 64px.

[bromiesTM]

Great catch. I wondered why it looked a bit different