/**
 * `.has-dark-background` — add this class to any block (Additional CSS
 * class(es)) whose background is dark. Everything inside flips to its
 * light-on-dark treatment, so nothing has to be restyled element by element:
 *
 *   - body text, headings, list items and subheadings turn white
 *   - gradient text (cdcfuse/text-gradient-light) swaps to the lighter stops
 *   - Fuse semantic tokens (text, icon, border, link, focus) remap to their
 *     existing "inverse" counterparts, which re-colors accordion chevrons,
 *     icons, separators, etc. in every Fuse component that reads them
 *
 * Brand tokens
 *   --Brand-Contrast-##       full scale like --Brand-##: Sky for every brand,
 *                             Teal (same step) for Dealer Inspire. Teal has no
 *                             05/95, so those are extrapolated (see below).
 *   --Brand-Contrast          alias of -60, for light backgrounds.
 *   --Brand-Contrast-Inverse  alias of -50, for dark backgrounds. These two
 *                             aliases are the one place to change the step.
 *   --Text-Gradient-Brand(-Inverse)
 *                             Two separate gradients, set explicitly (not derived
 *                             from the Brand scale). Cars/default: Purple-60 ->
 *                             Sky-60, inverse Purple-50 -> Sky-50. DI: Sky-60 ->
 *                             Teal-50, inverse Sky-50 -> Teal-40.
 *
 * Brand is read from the --Brand-* scale the theme already sets on
 * .brand-cars-com / .brand-dealer-inspire; the fallbacks make it render the
 * Cars treatment where no brand class is present (e.g. the editor canvas).
 *
 * Fuse hardcodes purple in several places; they all follow the brand here:
 *   - hero and ai-hero buttons: background / hover / active = Brand-60; the
 *     hover gradient has Brand-60 in the middle and Brand-Contrast on the ends
 *   - focus rings (primary / secondary / text buttons) = Brand-60, Brand-40
 *     on `inverse`; text-button hover underline likewise
 *   - the purple semantic tokens (accent-brand backgrounds, accent borders and
 *     icons, link hover underline, focus border)
 * Disabled states are neutral greys and hero focus is neutral, so unchanged.
 *
 * Other Fuse buttons are NOT remapped for dark backgrounds: they ship an
 * `inverse` attribute (the "Inverse" toggle on the Fuse Button block) that
 * already handles every variant and state.
 *
 * Keep identical with the Astro mirror (backend/src/styles/has-dark-background.css).
 */

/*
 * One rule for every brand scope. var() resolves on the element that declares
 * it, and each scope also declares its own --Brand-*, so this works for Cars
 * and DI alike (and :root as the default) without per-brand copies.
 * The default contrast scale here is Sky; DI overrides only the scale below.
 */
:root,
.brand-cars-com,
.brand-dealer-inspire {
	--Brand-Contrast-05: var(--Sky-05);
	--Brand-Contrast-10: var(--Sky-10);
	--Brand-Contrast-20: var(--Sky-20);
	--Brand-Contrast-30: var(--Sky-30);
	--Brand-Contrast-40: var(--Sky-40);
	--Brand-Contrast-50: var(--Sky-50);
	--Brand-Contrast-60: var(--Sky-60);
	--Brand-Contrast-70: var(--Sky-70);
	--Brand-Contrast-80: var(--Sky-80);
	--Brand-Contrast-90: var(--Sky-90);
	--Brand-Contrast-95: var(--Sky-95);
	--Brand-Contrast-100: var(--Sky-100);
	--Brand-Contrast: var(--Brand-Contrast-60);
	--Brand-Contrast-Inverse: var(--Brand-Contrast-50);

	/* Cars (default) text gradient: Purple -> Sky. Light = 60/60, dark = 50/50. */
	--Text-Gradient-Brand: linear-gradient(105deg, var(--Purple-60, #9653e5) 15%, var(--Sky-60, #1b82ee) 97.5%);
	--Text-Gradient-Brand-Inverse: linear-gradient(105deg, var(--Purple-50, #b072f9) 15%, var(--Sky-50, #3996f9) 97.5%);

	/* Hero: brand in the middle / base / press, contrast on the gradient ends. */
	--ep-button-color-background-hero: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-color-background-hero-hover: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-color-background-hero-active: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-color-background-hero-gradient-start: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-color-background-hero-gradient-end: var(--Brand-Contrast);
	--ep-button-color-background-ai-hero-hover: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-color-background-ai-hero-active: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-color-background-ai-hero-gradient-start: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-color-background-ai-hero-gradient-end: var(--Brand-Contrast);

	/* Focus rings and text-button hover underline (Fuse: Purple-60 / Purple-40 on inverse). */
	--ep-button-color-border-primary-focus: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-color-border-secondary-focus: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-color-border-text-focus: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-color-border-primary-focus-inverse: var(--Brand-40, var(--Purple-40, #c098ef));
	--ep-button-color-border-secondary-focus-inverse: var(--Brand-40, var(--Purple-40, #c098ef));
	--ep-button-color-border-text-focus-inverse: var(--Brand-40, var(--Purple-40, #c098ef));
	--ep-button-font-text-decoration-text-hover-color: var(--Brand-60, var(--Purple-60, #9653e5));
	--ep-button-font-text-decoration-text-hover-color-inverse: var(--Brand-40, var(--Purple-40, #c098ef));

	/* Fuse's purple semantic tokens (Fuse "brand" = Cars purple) -> brand scale. */
	--fuse-color-background-accent-brand: var(--Brand-10, var(--Purple-10, #f5eefc));
	--fuse-color-background-accent-brand-strong: var(--Brand-20, var(--Purple-20, #eaddfa));
	--fuse-color-background-interactive-brand: var(--Brand-60, var(--Purple-60, #9653e5));
	--fuse-color-border-accent: var(--Brand-60, var(--Purple-60, #9653e5));
	--fuse-color-border-focus: var(--Brand-60, var(--Purple-60, #9653e5));
	--fuse-color-border-focus-inverse: var(--Brand-40, var(--Purple-40, #c098ef));
	--fuse-color-decoration-line-link-hover: var(--Brand-60, var(--Purple-60, #9653e5));
	--fuse-color-decoration-line-link-pressed: var(--Brand-60, var(--Purple-60, #9653e5));
	--fuse-color-icon-accent: var(--Brand-60, var(--Purple-60, #9653e5));
	--fuse-color-icon-accent-inverse: var(--Brand-40, var(--Purple-40, #c098ef));
	--fuse-color-icon-accent-strong: var(--Brand-70, var(--Purple-70, #7740b6));
	--fuse-color-text-accent-brand: var(--Brand-70, var(--Purple-70, #7740b6));
	--fuse-color-text-accent-brand-strong: var(--Brand-80, var(--Purple-80, #65299d));
}

/*
 * The only brand difference: DI's contrast scale is Teal. Fuse has no Teal-05
 * or Teal-95, so those two are extrapolated from how Sky and Purple's 05/95
 * relate to their neighbors (05: lightness +2 over step 10, half the chroma;
 * 95: midway between 90 and 100). A real --Teal-05 / --Teal-95 takes over
 * automatically if Figma adds them.
 *   Teal-05  oklch(97.70% 0.0075 202.0)  #F2F9FA
 *   Teal-95  oklch(26.39% 0.0457 202.7)  #002B2F
 */
.brand-dealer-inspire {
	--Brand-Contrast-05: var(--Teal-05, #f2f9fa);
	--Brand-Contrast-10: var(--Teal-10);
	--Brand-Contrast-20: var(--Teal-20);
	--Brand-Contrast-30: var(--Teal-30);
	--Brand-Contrast-40: var(--Teal-40);
	--Brand-Contrast-50: var(--Teal-50);
	--Brand-Contrast-60: var(--Teal-60);
	--Brand-Contrast-70: var(--Teal-70);
	--Brand-Contrast-80: var(--Teal-80);
	--Brand-Contrast-90: var(--Teal-90);
	--Brand-Contrast-95: var(--Teal-95, #002b2f);
	--Brand-Contrast-100: var(--Teal-100);

	/* Dealer Inspire text gradient: Sky -> Teal. Light = Sky-60/Teal-50, dark = Sky-50/Teal-40. */
	--Text-Gradient-Brand: linear-gradient(105deg, var(--Sky-60, #1b82ee) 15%, var(--Teal-50, #03a0ab) 97.5%);
	--Text-Gradient-Brand-Inverse: linear-gradient(105deg, var(--Sky-50, #3996f9) 15%, var(--Teal-40, #66bcc4) 97.5%);
}

.has-dark-background {
	color: var(--fuse-color-text-inverse, #fff);

	/* One inline gradient format; the wrapper picks the stops. */
	--Text-Gradient-Brand: var(--Text-Gradient-Brand-Inverse);

	/* Fuse semantic tokens -> their on-dark counterparts. */
	--fuse-color-text: var(--fuse-color-text-inverse, #fff);
	--fuse-color-text-weak: var(--fuse-color-text-inverse-weak, #c2c9c8);
	--fuse-color-text-weaker: var(--fuse-color-text-inverse-weak, #c2c9c8);
	--fuse-color-text-link: var(--fuse-color-text-link-inverse, #fff);
	--fuse-color-text-link-hover: var(--fuse-color-text-link-inverse, #fff);
	--fuse-color-text-link-pressed: var(--fuse-color-text-link-inverse, #fff);
	--fuse-color-icon: var(--fuse-color-icon-inverse, #fff);
	--fuse-color-icon-weak: var(--fuse-color-text-inverse-weak, #c2c9c8);
	--fuse-color-icon-accent: var(--fuse-color-icon-accent-inverse);
	--fuse-color-border: var(--fuse-color-border-inverse, #859391);
	--fuse-color-border-focus: var(--fuse-color-border-focus-inverse);

	/* Accordion reads its own --ep-* tokens; point them at the inverse values. */
	--ep-accordion-headline-color-text: var(--fuse-color-text-inverse, #fff);
	--ep-accordion-headline-color-text-selected: var(--fuse-color-text-inverse, #fff);
	--ep-accordion-icon-color-fill: var(--fuse-color-icon-inverse, #fff);
	--ep-accordion-separator-color-border: var(--fuse-color-border-inverse, #859391);
}

/* Unlayered, so it beats the layered .subheading / h1 defaults. */
.has-dark-background .subheading {
	color: var(--fuse-color-text-inverse, #fff);
}

/* h1 subheadings get the brand's lightest tint instead of white. */
.has-dark-background h1 .subheading {
	color: var(--Brand-10, var(--Purple-10, #f5eefc));
}