/**
 * AreaChart theme configuration
 * Uses production-ready CSS variables from global.scss
 *
 * Note: Color cycling and gradients are handled inline in component
 * This theme focuses on container, SVG, and interactive styling
 */
const areaChartTheme = {
    // Main container with transition utilities for hover states
    containerStyle: "chart-container w-full h-full relative [&_.chart-areas]:transition-opacity [&_.chart-areas]:duration-300 [&_.chart-hover-areas]:cursor-pointer [&_.chart-hover-markers]:transition-all [&_.chart-hover-markers]:duration-200",
    // SVG container with overflow and transition utilities
    svgStyle: "overflow-visible [&_.chart-areas_path]:transition-all [&_.chart-areas_path]:duration-200",
    // Area group styling with drop shadows
    areaGroupStyle: "chart-areas [&_path]:drop-shadow-sm [&_path]:transition-all [&_path]:duration-200",
    // Empty state text color using correct CSS variable
    emptyStateStyle: "chart-container flex items-center justify-center text-[var(--color-text-placeholder)]",
};
/**
 * Get series color class for stroke and fill
 * Uses semantic color CSS variables in production-ready format
 */
const getSeriesColorClass = (index) => {
    const colors = [
        "stroke-[var(--color-primary)] fill-[var(--color-primary)]",
        "stroke-[var(--color-warning)] fill-[var(--color-warning)]",
        "stroke-[var(--color-success)] fill-[var(--color-success)]",
        "stroke-[var(--color-danger)] fill-[var(--color-danger)]",
    ];
    return colors[index % colors.length];
};
/**
 * Get fill color for SVG gradients
 * Returns CSS variable value directly for stopColor attribute
 */
const getSeriesFillColor = (index) => {
    const colorVars = [
        "var(--color-primary)",
        "var(--color-warning)",
        "var(--color-success)",
        "var(--color-danger)",
    ];
    return colorVars[index % colorVars.length];
};

export { areaChartTheme, getSeriesColorClass, getSeriesFillColor };
