/**
 * ActivityRings Theme Configuration
 *
 * Follows the established chart theming pattern with CSS variables
 */
const activityRingsTheme = {
    baseStyle: "relative flex items-center justify-center transition-all duration-300 cursor-default",
    svgStyle: "overflow-visible relative",
    ringDefaults: {
        strokeWidth: 8,
        gap: 1,
        colors: [
            "var(--color-primary-600)", // Outer: Darkest
            "var(--color-primary-400)", // Middle-outer
            "var(--color-primary-200)", // Middle
            "var(--color-primary-100)", // Middle-inner
            "var(--color-primary-50)", // Inner: Lightest
        ],
    },
    centerText: {
        label: "text-2xl font-semibold text-[var(--color-text-primary)]",
        suffix: "text-base font-normal text-[var(--color-text-secondary)]/80",
    },
};

export { activityRingsTheme };
