/*
 * Tooltip color inversion.
 *
 * Tooltips should always contrast with the surface they float above:
 *   - Light UI  -> dark tooltip (dark surface, light text).
 *   - Dark UI   -> light tooltip (light surface, dark text).
 *
 * Rather than restyling every tooltip component, we re-map the neutral/text
 * design tokens on the `.burst-tooltip-invert` scope to the *opposite* theme's
 * values. Any tooltip whose markup uses the standard surface/text utilities
 * (bg-white, bg-gray-*, text-text-black, text-text-gray, border-gray-*, etc.)
 * then inverts automatically — no per-component color classes required.
 */

/* Light UI: render the tooltip with the dark theme's neutral palette. */
.burst-tooltip-invert {
	--gray-hue: var(--brand-hue);

	--color-white: oklch(0.234 0.0095 var(--gray-hue));

	--color-gray-50: oklch(0.184 0.015 var(--gray-hue));
	--color-gray-100: oklch(0.3 0.012 var(--gray-hue));
	--color-gray-200: oklch(0.34 0.0147 var(--gray-hue));
	--color-gray-300: oklch(0.37 0.0165 var(--gray-hue));
	--color-gray-400: oklch(0.45 0.0145 var(--gray-hue));
	--color-gray-500: oklch(0.85 0.0106 var(--gray-hue));
	--color-gray-600: oklch(0.894 0.007 var(--gray-hue));
	--color-gray-700: oklch(0.924 0.0052 var(--gray-hue));
	--color-gray-800: oklch(0.9752 0.0017 var(--gray-hue));
	--color-gray-900: oklch(0.9773 0 var(--gray-hue));
	--color-gray-950: oklch(0.99 0.01 var(--gray-hue));

	--color-text-black: oklch(1 0 0 / 0.9);
	--color-text-gray: oklch(0.85 0.0072 var(--gray-hue) / 0.9);
	--color-text-gray-light: oklch(0.7 0.0072 var(--gray-hue) / 0.9);

	--color-border: var(--color-gray-400);
	--color-divider: var(--color-gray-300);
}

/* Dark UI: render the tooltip with the light theme's neutral palette.
	Host body classes are listed too because some tooltips portal to <body>. */
#burst-statistics.dark .burst-tooltip-invert,
body.dashboard-default-dark-theme .burst-tooltip-invert,
body.mainwp-default-dark-theme .burst-tooltip-invert,
body.updraft-central-default-dark-theme .burst-tooltip-invert {
	--gray-hue: var(--blue-hue);

	--color-white: #ffffff;

	--color-gray-50: oklch(0.9773 0.003 var(--gray-hue));
	--color-gray-100: oklch(0.9752 0.004 var(--gray-hue));
	--color-gray-200: oklch(0.924 0.01 var(--gray-hue));
	--color-gray-300: oklch(0.894 0.01 var(--gray-hue));
	--color-gray-400: oklch(0.85 0.0106 var(--gray-hue));
	--color-gray-500: oklch(0.735 0.0145 var(--gray-hue));
	--color-gray-600: oklch(0.497 0.0165 var(--gray-hue));
	--color-gray-700: oklch(0.352 0.0147 var(--gray-hue));
	--color-gray-800: oklch(0.262 0.0133 var(--gray-hue));
	--color-gray-900: oklch(0.184 0.0095 var(--gray-hue));
	--color-gray-950: oklch(0.097 0.00475 var(--gray-hue));

	--color-text-black: oklch(0.2 0.0017 var(--gray-hue) / 0.9);
	--color-text-gray: oklch(0.45 0.0072 var(--gray-hue) / 0.95);
	--color-text-gray-light: oklch(0.7 0.0072 var(--gray-hue) / 0.95);

	--color-border: var(--color-gray-400);
	--color-divider: var(--color-gray-300);
}
