// Resolve a Tailwind class to an rgb()/rgba() string Canvas2D can fillStyle.
// We render a 0-size span with the desired text-* / bg-* class as a child of
// the player container, then read its computed color. The browser does the
// hsl()/oklch()/color-mix() math for us and always returns a parseable string.

export function resolveTextColor(parent: HTMLElement, twClass: string, fallback = '#888'): string {
  if (!parent || typeof window === 'undefined') return fallback;
  const probe = document.createElement('span');
  probe.className = twClass;
  probe.style.cssText =
    'position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;';
  parent.appendChild(probe);
  const value = getComputedStyle(probe).color;
  parent.removeChild(probe);
  return value || fallback;
}

export function resolveBgColor(parent: HTMLElement, twClass: string, fallback = '#222'): string {
  if (!parent || typeof window === 'undefined') return fallback;
  const probe = document.createElement('span');
  probe.className = twClass;
  probe.style.cssText =
    'position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;';
  parent.appendChild(probe);
  const value = getComputedStyle(probe).backgroundColor;
  parent.removeChild(probe);
  return value || fallback;
}