/**
 * ScatterPlot Theme - Uses CSS variables for production-ready styling
 */
const scatterPlotTheme = {
    containerStyle: 'relative inline-flex flex-col items-center w-full',
    svgStyle: 'overflow-visible',
    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-base',
    // Grid styles
    gridLineStyle: 'stroke-[var(--color-border)]',
    // Axis styles
    axisLineStyle: 'stroke-[var(--color-text-secondary)]',
    axisLabelStyle: 'fill-[var(--color-text-secondary)]',
    // Data point styles
    dotStyle: 'fill-opacity-70 stroke-white',
    dotHoverStyle: 'fill-opacity-100',
    // Legend styles
    legendContainerStyle: 'flex flex-wrap gap-3 mt-4 justify-center',
    legendItemStyle: 'flex items-center gap-2',
    legendDotStyle: 'w-3 h-3 rounded-full',
    legendLabelStyle: 'text-base text-[var(--color-text-secondary)]',
    // Default category colors using CSS variables
    colors: [
        'var(--color-primary)',
        'var(--color-success)',
        'var(--color-warning)',
        'var(--color-danger)',
        'hsl(262, 83%, 58%)', // violet
        'hsl(328, 86%, 70%)', // pink
    ],
};
/**
 * Get fill color for category (supports both CSS variables and direct colors)
 */
function getCategoryColor(colors, categoryIndex) {
    return colors[categoryIndex % colors.length];
}

export { getCategoryColor, scatterPlotTheme };
