/*
 * Pulse demo hotfixes, loaded after the exported Vite build.
 *
 * In the dark themes the Helium success and error tokens use the same
 * colour for the background and the foreground, so a filled step marker
 * hides its own icon. These rules keep the light-mode look: a soft tint
 * behind a full-strength icon and border. Selectors are scoped to the dark
 * themes and are more specific than the bundle's rules, so load order does
 * not matter. Remove once the demo source is fixed and re-exported.
 */

/* Transaction detail timeline */
:root:is([data-theme="dark"], [data-theme="business-dark"]) .transaction-journey .is-complete .transaction-journey-marker {
  background: color-mix(in srgb, var(--helium-color-fg-success-primary) 16%, var(--partner-surface, var(--helium-color-bg-primary)));
}

:root:is([data-theme="dark"], [data-theme="business-dark"]) .transaction-journey .is-error .transaction-journey-marker {
  background: color-mix(in srgb, var(--helium-color-fg-error-primary) 16%, var(--partner-surface, var(--helium-color-bg-primary)));
}

/* The Ocean dark theme also gives the current step a matching fill and icon */
:root[data-theme="dark"] .transaction-journey .is-current .transaction-journey-marker {
  background: color-mix(in srgb, var(--helium-color-border-brand) 18%, var(--partner-surface, var(--helium-color-bg-primary)));
}

/* Order timeline in the core app shell uses the same token pairing */
:root:is([data-theme="dark"], [data-theme="business-dark"]) .timeline li.is-complete > i {
  background: color-mix(in srgb, var(--helium-color-fg-success-primary) 16%, var(--helium-color-bg-primary));
}