/**
 * Resolves a CSS custom property to an hsl() color string.
 * Use when SVG/canvas contexts (Recharts Cell fill, canvas) require concrete values.
 * Falls back gracefully in SSR environments.
 */
export function resolveToken(cssVar: string): string {
  if (typeof window === 'undefined') return `hsl(var(${cssVar}))`;
  const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
  return value ? `hsl(${value})` : `hsl(var(${cssVar}))`;
}

/**
 * Returns Tailwind CSS classes for status badge display using semantic tokens.
 * Replaces per-component color mappings (rateColor, CHURN_COLORS, etc.).
 */
export function statusBadgeClass(
  severity: 'success' | 'critical' | 'high' | 'medium' | 'low' | 'info',
): string {
  const map: Record<string, string> = {
    success: 'bg-success/15 text-success',
    critical: 'bg-destructive/15 text-destructive',
    high: 'bg-warning-high/15 text-warning-high',
    medium: 'bg-warning/15 text-warning',
    low: 'bg-info/15 text-info',
    info: 'bg-primary/15 text-primary',
  };
  return map[severity] ?? 'bg-muted text-muted-foreground';
}