/**
 * Convert stored theme/branding JSON into CSS variables.
 * Falls back to existing brand palette if values are missing.
 */
export function buildThemeCssVars(settings?: { theme?: any; branding?: any }) {
  const theme = settings?.theme || {};
  const branding = settings?.branding || {};

  const cssVars: Record<string, string> = {
    '--color-primary': theme.primary_color ?? '#0F9972',
    '--color-secondary': theme.secondary_color ?? '#111827',
    '--color-accent': theme.accent_color ?? '#22c55e',
    '--color-text-primary': theme.text_primary ?? '#111827',
    '--color-text-secondary': theme.text_secondary ?? '#4b5563',
    '--color-background': theme.background ?? '#ffffff',
    '--gradient-from': theme.gradient_from ?? '#0F9972',
    '--gradient-to': theme.gradient_to ?? '#0ea5e9',
    '--button-radius': (theme.button_radius ?? 12).toString() + 'px',
    '--button-shadow': theme.button_shadow ?? '0 10px 30px rgba(15,153,114,0.25)',
    '--container-width': (theme.container_width ?? 1200).toString() + 'px',
    '--font-heading': theme.font_heading ?? 'Space Grotesk, Inter, system-ui, sans-serif',
    '--font-body': theme.font_body ?? 'Inter, system-ui, sans-serif',
  };

  if (branding.logo_url) {
    cssVars['--brand-logo-url'] = `url('${branding.logo_url}')`;
  }
  if (branding.favicon_url) {
    cssVars['--brand-favicon-url'] = branding.favicon_url;
  }

  return cssVars;
}
