[ic-page-header]: Move the background CSS to the Host or create CSS Custom Property so it can be changed externally

## What component is this related to?
ic-page-header

## Why do we need it?
While development teams wait for the components to be made available in dark mode, some teams are using their initiative and creating themes which allow them to have a dark mode variant where possible. ic-page-header is a popular component which would benefit from having a dark variant, however, it is not possible to change the background colour due to the position of the background color. This ticket is to move it from the header tag inside the shadow DOM to the `` or expose the background colour via a CSS custom property.

The ability to customise the background of page header allows for enhanced customisation regardless of theme or mode.

As the page header uses a number of component in the foreground, the appearance options of those components needs to dynamically change dependent on the selected background colour.

Additionally, the foreground colour of the text elements need to also be updated automatically to ensure colour contrast ratios are met.

Due to this the following components require appearance options:
- Stepper - #1553
- Breadcrumb - available
- Buttons - available
- Search - #1603
- Text field - #1614
- Tabs - available

The above ticket block development of this ticket as the appearance options are required to automatically switch based on custom background colour.

## Related open issues
#1553
#1603
#1614

# Acceptance Criteria

*Given* that a page header is being configured
*When* setting its properties
*Then* an option exists to set a custom background colour.

*Given* that a page header has been configured with a custom background colour
*When* that custom colour has luminance <= 50%,
*Then* set foreground colour to 'white text'
*And* set following component appearance props:
- Buttons: Light
- Tabs: Light
- Breadcrumbs: Light
- Search bar: Light
- Text field: light
- Stepper: Light

*Given* that a page header has been configured with a custom background colour
*When* that custom colour has luminance > 50%,
*Then* set foreground colour to 'white text'
*And* set following component appearance props:
- Buttons: Dark
- Tabs: Dark
- Breadcrumbs: Dark
- Search bar: Dark
- Text field: Dark
- Stepper: Dark

(if no custom colour is selected, the default colouration and component props are used)

Start at the ic-page-header component and inspect how the header background is styled inside its shadow DOM. Review the acceptance criteria and related issues #1553, #1603, and #1614; completion requires configurable background styling, luminance-based foreground and component appearance changes, and preservation of the default behavior.

Written by the indexing model from the issue text.