/**
 * Cast: stock Craft.
 *
 * `data-cast-ignore` marks a subtree as unthemed, and everything here re-declares the
 * properties a theme changed back to the values Craft ships, so the region renders as it
 * would with no theme active while the CP around it stays themed.
 *
 * Loaded alongside any active theme, light or dark. It lived in `_dark-base.css` while
 * dark themes were the only ones that moved enough to need it, which meant a light theme
 * retinting the ramp got no exemption at all — the attribute was accepted and silently
 * did nothing.
 *
 * Scoped on `html[data-cast-theme]` rather than a scheme or a handle. Matching the
 * attribute's presence keeps one selector for every theme and puts this a step above a
 * theme's own `html[data-cast-theme="x"]` rules, which is what it has to beat. The
 * attribute is removed outright when no theme is active, so nothing here applies to a
 * stock CP that never needed it.
 */

/* Some CP screens are self-contained apps that ship their own compiled stylesheet and
   consume almost none of Craft's custom properties. Craft's own Plugin Store is the
   worst offender: a Tailwind bundle whose greys are baked in as literal values, so the
   inverted ramp never reaches them and its text ends up dark on a dark canvas.

   `data-cast-ignore` marks a subtree as stock Craft. Everything below re-declares the
   properties Cast inverted, back to the values Craft ships, so the region renders as it
   would with no theme active while the CP around it stays themed.

   Both layers of the ramp have to be re-declared, not just the `-hsl` triplets. Craft
   derives `--gray-500: hsl(var(--gray-500-hsl))` on `:root`, which resolves there
   against Cast's inverted triplet and inherits down as an already-dark colour. Setting
   only the triplet here would leave every named grey untouched.

   Anything reading these through `var()` corrects itself, which covers most of the patch
   layer above — it aims at tokens rather than literals by policy. Patches carrying
   literal colours don't, and are handled at the end of this section.

   The Plugin Store's wrapper is Craft's markup with no hook inside it, so Cast can't put
   the attribute there. It tags the body server-side instead and the wrapper is aliased
   onto the same rules. Stamping the attribute with JS would work, but only after the Vue
   app had already mounted and painted.

   Both `#app` and `.ps-wrapper` are matched because only one of them exists at a time.
   Craft's template ships an empty `<div id="app">`, and the store mounts with Vue 2's
   `$mount('#app')`, which replaces that element with the app's root rather than
   rendering inside it — so `#app` is gone by the time there's anything to look at.
   Matching it as well paints the region before the app mounts, instead of leaving the
   themed canvas showing until it does. */

html[data-cast-theme] [data-cast-ignore],
html[data-cast-theme] body.cast-ignore-plugin-store :is(#app, .ps-wrapper) {
    color-scheme: light;

    /* Cast's own surface tokens, so the patch rules that aim at them land light too. */
    --cast-surface: var(--white);
    --cast-surface-hover: var(--gray-100);
    --cast-chip: var(--gray-200);
    --cast-chip-active: var(--gray-300);
    --cast-popover-outline: rgb(0 0 0 / 10%);
    --cast-popover-shadow: 0 0 0 1px var(--cast-popover-outline), 0 5px 20px rgb(0 0 0 / 15%);

    --gray-050-hsl: 212, 60%, 97%;
    --gray-100-hsl: 212, 50%, 93%;
    --gray-150-hsl: 212, 40%, 89%;
    --gray-200-hsl: 212, 30%, 85%;
    --gray-300-hsl: 211, 13%, 65%;
    --gray-350-hsl: 211, 11%, 59%;
    --gray-400-hsl: 210, 10%, 53%;
    --gray-500-hsl: 211, 12%, 43%;
    --gray-550-hsl: 210, 13%, 40%;
    --gray-600-hsl: 209, 14%, 37%;
    --gray-700-hsl: 209, 18%, 30%;
    --gray-800-hsl: 209, 20%, 25%;
    --gray-900-hsl: 210, 24%, 16%;
    --gray-1000-hsl: 210, 24%, 10%;
    --body-bg: var(--gray-100);
    --bg-color-hsl: 212, 50%, 93%;
    --text-color: var(--gray-700);
    --light-text-color: var(--gray-550);
    --link-color: #2563eb;
    --focus-ring-color: #0284c7;
    --pane-bg: var(--white);
    --pane-shadow: 0 0 0 1px var(--gray-200), 0 2px 12px hsl(from var(--gray-200) h s l / 50%);
    --secondary-pane-bg: var(--gray-050);
    --secondary-pane-shadow: var(--pane-shadow);
    --slideout-footer-bg: var(--gray-050);
    --sidebar-bg: var(--gray-150);
    --modal-bg: var(--pane-bg);
    --modal-shadow: 0 0 0 1px hsl(from var(--gray-400) h s l / 25%), 0 25px 100px hsl(from var(--gray-900) h s l / 50%);
    --login-modal-bg: var(--gray-100);
    --shade-bg: hsl(from var(--gray-900) h s l / 50%);
    --input-bg: hsl(212, 50%, 99%);
    --input-border-color: hsla(212, 25%, 50%, 0.4);
    --fg-input: #607d9f;
    --bg-error: var(--red-100);
    --bg-warning: var(--amber-100);
    --bg-success: var(--teal-100);
    --bg-notice: var(--sky-100);
    --fg-error: #d81f23;
    --fg-warning: var(--amber-700);
    --fg-success: var(--teal-700);
    --fg-notice: var(--sky-700);
    --fg-subtle: var(--gray-550);
    --border-error: var(--red-300);
    --border-warning: var(--amber-300);
    --border-warning-emphasis: var(--amber-600);
    --border-success: var(--teal-300);
    --border-notice: var(--sky-300);
    --error-color-rgb: 216 31 35;
    --border-hairline: rgb(from var(--gray-800) r g b/10%);
    --border-hairline-medium: #cfd8e3;
    --border-hairline-dark: rgb(from hsl(210, 10%, 53%) r g b / 50%);
    --bg-selection-light: var(--gray-200);
    --bg-selection-dark: var(--gray-500);
    --focus-outline-light: var(--blue-300);
    --focus-outline-medium: var(--focus-ring-color,#0284c7);
    --focus-outline-dark: #0f74b1;
    --gray-050: hsl(var(--gray-050-hsl));
    --gray-100: hsl(var(--gray-100-hsl));
    --gray-150: hsl(var(--gray-150-hsl));
    --gray-200: hsl(var(--gray-200-hsl));
    --gray-300: hsl(var(--gray-300-hsl));
    --gray-350: hsl(var(--gray-350-hsl));
    --gray-400: hsl(var(--gray-400-hsl));
    --gray-500: hsl(var(--gray-500-hsl));
    --gray-550: hsl(var(--gray-550-hsl));
    --gray-600: hsl(var(--gray-600-hsl));
    --gray-700: hsl(var(--gray-700-hsl));
    --gray-800: hsl(var(--gray-800-hsl));
    --gray-900: hsl(var(--gray-900-hsl));
    --gray-1000: hsl(var(--gray-1000-hsl));
    --bg-secondary: var(--gray-500);
    --border-secondary: var(--gray-500);
    --ui-control-fg: var(--fg-subtle);
    --ui-control-fg-hover: var(--gray-600);
    --ui-control-fg-active: var(--gray-700);
    --ui-control-border: var(--ui-control-fg);
    --nav-item-badge-bg: var(--fg-subtle);
    --nav-item-fg-active: var(--text-color);
    --nav-item-fg-hover: var(--text-color);
    --nav-item-bg-active: var(--gray-200);
    --nav-item-bg-hover: var(--gray-200);
    --bg-color: var(--body-bg);
    --secondary-color: var(--bg-secondary);
    --medium-dark-text-color: var(--fg-subtle);
    --medium-text-color: var(--fg-subtle);
    --hairline-color: var(--border-hairline);
    --light-sel-color: var(--bg-selection-light);
    --dark-sel-color: var(--bg-selection-dark);
    --ui-control-color: var(--ui-control-fg);
    --ui-control-hover-color: var(--ui-control-fg-hover);
    --ui-control-active-color: var(--ui-control-fg-active);
    --header-border: 1px solid var(--hairline-color);
    --slideout-footer-shadow: var(--pane-shadow);
    --button-text-color: var(--text-color);
    --secondary-button-bg: var(--gray-500);
    --secondary-button-bg--hover: var(--gray-550);
    --secondary-button-bg--active: var(--gray-600);
    --hr-border: 1px solid var(--hairline-color);
}

/* An ignored region generally paints nothing of its own — the Plugin Store's wrapper is
   a bare `<div>` — so without this the themed canvas shows through behind it.

   Menus are the exception: they're marked as they open (see `registerIgnoredMenus()`)
   having already been moved to `<body>`, and Craft paints them white rather than in the
   canvas colour. Left in, this would out-specify that and tint them. */
html[data-cast-theme] [data-cast-ignore]:not(.menu) {
    background-color: var(--body-bg);
    color: var(--text-color);
}

/* The Plugin Store reads better as a panel inset into the themed CP than as a patch of
   stock canvas, so it's given a pane's white fill and corners rather than `--body-bg`.
   `clip` rather than `hidden` keeps the wrapper from becoming a scroll container; the
   only out-of-flow children in there are `position: fixed`, which escapes either way. */
html[data-cast-theme] body.cast-ignore-plugin-store :is(#app, .ps-wrapper) {
    border-radius: var(--large-border-radius);
    overflow: clip;
    background-color: var(--white);
    color: var(--text-color);
}

/* Code blocks are the one patch above that hard-codes its colours, and readmes and
   changelogs inside an ignored region are full of them. */
html[data-cast-theme] [data-cast-ignore] pre,
html[data-cast-theme] [data-cast-ignore] .code:not(input, textarea, select, .text, .light, td, th),
html[data-cast-theme] body.cast-ignore-plugin-store .ps-wrapper pre,
html[data-cast-theme] body.cast-ignore-plugin-store .ps-wrapper .code:not(input, textarea, select, .text, .light, td, th) {
    background-color: var(--gray-100);
    color: var(--text-color);
}